Hello, today I wanted to tell everyone about a module made by me and @LogicUndefined, this module is used for generating a text with a custom font.
Ever wanted to use your own fonts? But never could because of Roblox’s limited fonts library, well that’s the problem we faced when working on our new and upcoming horror game. We needed a font that’s pixelated and we didn’t like the current one. So we decided why not just make our own font module [CFM]
Showcase
The font we will be making in this tutorial!
Necessary stuff
The app BMFont made by AngelCode [BMFont - AngelCode.com] this is used for getting the font into the format XML and PNG
The Custom Font Module:
https://create.roblox.com/store/asset/16177689562
We Released A Brand New Plugin That Automatically Converts The .Fnt To The Right Format!
https://create.roblox.com/store/asset/85538084957433/Font-Converter
It includes a pre-made font.
Not so necessary stuff
Demo place:
Custom Font Demo.rbxl (60.1 KB)
Files if wanted to tag along:
NovemberFOnt.xml (11.3 KB)
Tutorial
- How does this even work?
We used the XML unpacker [GitHub - jonathanpoelen/lua-xmlparser: Fast, simple, pure Lua library for XML parsing] made by Jonathanpoelen on GitHub.
It generates an image label and it uses the ImageRectOffset and ImageRectSize property of it to change the image to the current letter.
- How do you even get a custom font in Roblox?
Well you can use different sites such as www.dafont.com, google fonts and more! You download the font and save it anywhere. Then once you open the BMFont app you will be prompted by something like this:
To change the current font you need to go into Options > Font Settings.
Here you can add the custom font by pressing “Add font file” and selecting the downloaded font. Keep in mind the format has to be a .ttf (windows font file)
(if it doesn’t appear in the “Font:” list then just reopen the app)
Then after you set the custom font it should look something like this:
Press ok and head on into Options > Export Options.
Once you’re in the Export Options tab set the Spacing “A” and Spacing “B” to 1
The rest of the settings I don’t know that they do so I just leave them how they are right now.
After you did this go to File Format at the bottom of the page and set “Font descriptor:” to XML.
Then set “Textures:” to PNG, then press Ok.
This is how Export Options should look like:
Now you should be able to see your font in the main window like this:
As you can see the letters have changed to the new font we picked!
When you’ve finished all these steps go ahead and go to Options > Save bitmap font as [Ctrl + S]
and pick a location for the font, remember the font path.
These are the 2 files that you will get after Saving the bitmap font:
You might say, where is the XML file tho? Well the .fnt file is secretly but not so secretly a XML file, So go ahead and open it up using whatever program you want. For the tutorial ill use Visual Studio Code
This might look intimidating, but don’t worry it is! How are we going to port this to Roblox you might say, Well we are going to use this as a template:
This file is also in the demo place and in the module so don’t worry about not having it!
return {
[32] = {x = 0, y = 0, width = 0, height = 0, xoffset = 0, yoffset = 0, xadvance = 0, page = 0, chnl = 15},
[33] = {x = 0, y = 0, width = 0, height = 0, xoffset = 0, yoffset = 0, xadvance = 0, page = 0, chnl = 15},
[34] = {x = 0, y = 0, width = 0, height = 0, xoffset = 0, yoffset = 0, xadvance = 0, page = 0, chnl = 15},
[35] = {x = 0, y = 0, width = 0, height = 0, xoffset = 0, yoffset = 0, xadvance = 0, page = 0, chnl = 15},
[36] = {x = 0, y = 0, width = 0, height = 0, xoffset = 0, yoffset = 0, xadvance = 0, page = 0, chnl = 15},
[37] = {x = 0, y = 0, width = 0, height = 0, xoffset = 0, yoffset = 0, xadvance = 0, page = 0, chnl = 15},
[38] = {x = 0, y = 0, width = 0, height = 0, xoffset = 0, yoffset = 0, xadvance = 0, page = 0, chnl = 15},
[39] = {x = 0, y = 0, width = 0, height = 0, xoffset = 0, yoffset = 0, xadvance = 0, page = 0, chnl = 15},
[40] = {x = 0, y = 0, width = 0, height = 0, xoffset = 0, yoffset = 0, xadvance = 0, page = 0, chnl = 15},
[41] = {x = 0, y = 0, width = 0, height = 0, xoffset = 0, yoffset = 0, xadvance = 0, page = 0, chnl = 15},
[42] = {x = 0, y = 0, width = 0, height = 0, xoffset = 0, yoffset = 0, xadvance = 0, page = 0, chnl = 15},
[43] = {x = 0, y = 0, width = 0, height = 0, xoffset = 0, yoffset = 0, xadvance = 0, page = 0, chnl = 15},
[44] = {x = 0, y = 0, width = 0, height = 0, xoffset = 0, yoffset = 0, xadvance = 0, page = 0, chnl = 15},
[45] = {x = 0, y = 0, width = 0, height = 0, xoffset = 0, yoffset = 0, xadvance = 0, page = 0, chnl = 15},
[46] = {x = 0, y = 0, width = 0, height = 0, xoffset = 0, yoffset = 0, xadvance = 0, page = 0, chnl = 15},
[47] = {x = 0, y = 0, width = 0, height = 0, xoffset = 0, yoffset = 0, xadvance = 0, page = 0, chnl = 15},
[48] = {x = 0, y = 0, width = 0, height = 0, xoffset = 0, yoffset = 0, xadvance = 0, page = 0, chnl = 15},
[49] = {x = 0, y = 0, width = 0, height = 0, xoffset = 0, yoffset = 0, xadvance = 0, page = 0, chnl = 15},
[50] = {x = 0, y = 0, width = 0, height = 0, xoffset = 0, yoffset = 0, xadvance = 0, page = 0, chnl = 15},
[51] = {x = 0, y = 0, width = 0, height = 0, xoffset = 0, yoffset = 0, xadvance = 0, page = 0, chnl = 15},
[52] = {x = 0, y = 0, width = 0, height = 0, xoffset = 0, yoffset = 0, xadvance = 0, page = 0, chnl = 15},
[53] = {x = 0, y = 0, width = 0, height = 0, xoffset = 0, yoffset = 0, xadvance = 0, page = 0, chnl = 15},
[54] = {x = 0, y = 0, width = 0, height = 0, xoffset = 0, yoffset = 0, xadvance = 0, page = 0, chnl = 15},
[55] = {x = 0, y = 0, width = 0, height = 0, xoffset = 0, yoffset = 0, xadvance = 0, page = 0, chnl = 15},
[56] = {x = 0, y = 0, width = 0, height = 0, xoffset = 0, yoffset = 0, xadvance = 0, page = 0, chnl = 15},
[57] = {x = 0, y = 0, width = 0, height = 0, xoffset = 0, yoffset = 0, xadvance = 0, page = 0, chnl = 15},
[58] = {x = 0, y = 0, width = 0, height = 0, xoffset = 0, yoffset = 0, xadvance = 0, page = 0, chnl = 15},
[59] = {x = 0, y = 0, width = 0, height = 0, xoffset = 0, yoffset = 0, xadvance = 0, page = 0, chnl = 15},
[60] = {x = 0, y = 0, width = 0, height = 0, xoffset = 0, yoffset = 0, xadvance = 0, page = 0, chnl = 15},
[61] = {x = 0, y = 0, width = 0, height = 0, xoffset = 0, yoffset = 0, xadvance = 0, page = 0, chnl = 15},
[62] = {x = 0, y = 0, width = 0, height = 0, xoffset = 0, yoffset = 0, xadvance = 0, page = 0, chnl = 15},
[63] = {x = 0, y = 0, width = 0, height = 0, xoffset = 0, yoffset = 0, xadvance = 0, page = 0, chnl = 15},
[64] = {x = 0, y = 0, width = 0, height = 0, xoffset = 0, yoffset = 0, xadvance = 0, page = 0, chnl = 15},
[65] = {x = 0, y = 0, width = 0, height = 0, xoffset = 0, yoffset = 0, xadvance = 0, page = 0, chnl = 15},
[66] = {x = 0, y = 0, width = 0, height = 0, xoffset = 0, yoffset = 0, xadvance = 0, page = 0, chnl = 15},
[67] = {x = 0, y = 0, width = 0, height = 0, xoffset = 0, yoffset = 0, xadvance = 0, page = 0, chnl = 15},
[68] = {x = 0, y = 0, width = 0, height = 0, xoffset = 0, yoffset = 0, xadvance = 0, page = 0, chnl = 15},
[69] = {x = 0, y = 0, width = 0, height = 0, xoffset = 0, yoffset = 0, xadvance = 0, page = 0, chnl = 15},
[70] = {x = 0, y = 0, width = 0, height = 0, xoffset = 0, yoffset = 0, xadvance = 0, page = 0, chnl = 15},
[71] = {x = 0, y = 0, width = 0, height = 0, xoffset = 0, yoffset = 0, xadvance = 0, page = 0, chnl = 15},
[72] = {x = 0, y = 0, width = 0, height = 0, xoffset = 0, yoffset = 0, xadvance = 0, page = 0, chnl = 15},
[73] = {x = 0, y = 0, width = 0, height = 0, xoffset = 0, yoffset = 0, xadvance = 0, page = 0, chnl = 15},
[74] = {x = 0, y = 0, width = 0, height = 0, xoffset = 0, yoffset = 0, xadvance = 0, page = 0, chnl = 15},
[75] = {x = 0, y = 0, width = 0, height = 0, xoffset = 0, yoffset = 0, xadvance = 0, page = 0, chnl = 15},
[76] = {x = 0, y = 0, width = 0, height = 0, xoffset = 0, yoffset = 0, xadvance = 0, page = 0, chnl = 15},
[77] = {x = 0, y = 0, width = 0, height = 0, xoffset = 0, yoffset = 0, xadvance = 0, page = 0, chnl = 15},
[78] = {x = 0, y = 0, width = 0, height = 0, xoffset = 0, yoffset = 0, xadvance = 0, page = 0, chnl = 15},
[79] = {x = 0, y = 0, width = 0, height = 0, xoffset = 0, yoffset = 0, xadvance = 0, page = 0, chnl = 15},
[80] = {x = 0, y = 0, width = 0, height = 0, xoffset = 0, yoffset = 0, xadvance = 0, page = 0, chnl = 15},
[81] = {x = 0, y = 0, width = 0, height = 0, xoffset = 0, yoffset = 0, xadvance = 0, page = 0, chnl = 15},
[82] = {x = 0, y = 0, width = 0, height = 0, xoffset = 0, yoffset = 0, xadvance = 0, page = 0, chnl = 15},
[83] = {x = 0, y = 0, width = 0, height = 0, xoffset = 0, yoffset = 0, xadvance = 0, page = 0, chnl = 15},
[84] = {x = 0, y = 0, width = 0, height = 0, xoffset = 0, yoffset = 0, xadvance = 0, page = 0, chnl = 15},
[85] = {x = 0, y = 0, width = 0, height = 0, xoffset = 0, yoffset = 0, xadvance = 0, page = 0, chnl = 15},
[86] = {x = 0, y = 0, width = 0, height = 0, xoffset = 0, yoffset = 0, xadvance = 0, page = 0, chnl = 15},
[87] = {x = 0, y = 0, width = 0, height = 0, xoffset = 0, yoffset = 0, xadvance = 0, page = 0, chnl = 15},
[88] = {x = 0, y = 0, width = 0, height = 0, xoffset = 0, yoffset = 0, xadvance = 0, page = 0, chnl = 15},
[89] = {x = 0, y = 0, width = 0, height = 0, xoffset = 0, yoffset = 0, xadvance = 0, page = 0, chnl = 15},
[90] = {x = 0, y = 0, width = 0, height = 0, xoffset = 0, yoffset = 0, xadvance = 0, page = 0, chnl = 15},
[91] = {x = 0, y = 0, width = 0, height = 0, xoffset = 0, yoffset = 0, xadvance = 0, page = 0, chnl = 15},
[92] = {x = 0, y = 0, width = 0, height = 0, xoffset = 0, yoffset = 0, xadvance = 0, page = 0, chnl = 15},
[93] = {x = 0, y = 0, width = 0, height = 0, xoffset = 0, yoffset = 0, xadvance = 0, page = 0, chnl = 15},
[94] = {x = 0, y = 0, width = 0, height = 0, xoffset = 0, yoffset = 0, xadvance = 0, page = 0, chnl = 15},
[95] = {x = 0, y = 0, width = 0, height = 0, xoffset = 0, yoffset = 0, xadvance = 0, page = 0, chnl = 15},
[96] = {x = 0, y = 0, width = 0, height = 0, xoffset = 0, yoffset = 0, xadvance = 0, page = 0, chnl = 15},
[97] = {x = 0, y = 0, width = 0, height = 0, xoffset = 0, yoffset = 0, xadvance = 0, page = 0, chnl = 15},
[98] = {x = 0, y = 0, width = 0, height = 0, xoffset = 0, yoffset = 0, xadvance = 0, page = 0, chnl = 15},
[99] = {x = 0, y = 0, width = 0, height = 0, xoffset = 0, yoffset = 0, xadvance = 0, page = 0, chnl = 15},
[100] = {x = 0, y = 0, width = 0, height = 0, xoffset = 0, yoffset = 0, xadvance = 0, page = 0, chnl = 15},
[101] = {x = 0, y = 0, width = 0, height = 0, xoffset = 0, yoffset = 0, xadvance = 0, page = 0, chnl = 15},
[102] = {x = 0, y = 0, width = 0, height = 0, xoffset = 0, yoffset = 0, xadvance = 0, page = 0, chnl = 15},
[103] = {x = 0, y = 0, width = 0, height = 0, xoffset = 0, yoffset = 0, xadvance = 0, page = 0, chnl = 15},
[104] = {x = 0, y = 0, width = 0, height = 0, xoffset = 0, yoffset = 0, xadvance = 0, page = 0, chnl = 15},
[105] = {x = 0, y = 0, width = 0, height = 0, xoffset = 0, yoffset = 0, xadvance = 0, page = 0, chnl = 15},
[106] = {x = 0, y = 0, width = 0, height = 0, xoffset = 0, yoffset = 0, xadvance = 0, page = 0, chnl = 15},
[107] = {x = 0, y = 0, width = 0, height = 0, xoffset = 0, yoffset = 0, xadvance = 0, page = 0, chnl = 15},
[108] = {x = 0, y = 0, width = 0, height = 0, xoffset = 0, yoffset = 0, xadvance = 0, page = 0, chnl = 15},
[109] = {x = 0, y = 0, width = 0, height = 0, xoffset = 0, yoffset = 0, xadvance = 0, page = 0, chnl = 15},
[110] = {x = 0, y = 0, width = 0, height = 0, xoffset = 0, yoffset = 0, xadvance = 0, page = 0, chnl = 15},
[111] = {x = 0, y = 0, width = 0, height = 0, xoffset = 0, yoffset = 0, xadvance = 0, page = 0, chnl = 15},
[112] = {x = 0, y = 0, width = 0, height = 0, xoffset = 0, yoffset = 0, xadvance = 0, page = 0, chnl = 15},
[113] = {x = 0, y = 0, width = 0, height = 0, xoffset = 0, yoffset = 0, xadvance = 0, page = 0, chnl = 15},
[114] = {x = 0, y = 0, width = 0, height = 0, xoffset = 0, yoffset = 0, xadvance = 0, page = 0, chnl = 15},
[115] = {x = 0, y = 0, width = 0, height = 0, xoffset = 0, yoffset = 0, xadvance = 0, page = 0, chnl = 15},
[116] = {x = 0, y = 0, width = 0, height = 0, xoffset = 0, yoffset = 0, xadvance = 0, page = 0, chnl = 15},
[117] = {x = 0, y = 0, width = 0, height = 0, xoffset = 0, yoffset = 0, xadvance = 0, page = 0, chnl = 15},
[118] = {x = 0, y = 0, width = 0, height = 0, xoffset = 0, yoffset = 0, xadvance = 0, page = 0, chnl = 15},
[119] = {x = 0, y = 0, width = 0, height = 0, xoffset = 0, yoffset = 0, xadvance = 0, page = 0, chnl = 15},
[120] = {x = 0, y = 0, width = 0, height = 0, xoffset = 0, yoffset = 0, xadvance = 0, page = 0, chnl = 15},
[121] = {x = 0, y = 0, width = 0, height = 0, xoffset = 0, yoffset = 0, xadvance = 0, page = 0, chnl = 15},
[122] = {x = 0, y = 0, width = 0, height = 0, xoffset = 0, yoffset = 0, xadvance = 0, page = 0, chnl = 15},
[123] = {x = 0, y = 0, width = 0, height = 0, xoffset = 0, yoffset = 0, xadvance = 0, page = 0, chnl = 15},
[124] = {x = 0, y = 0, width = 0, height = 0, xoffset = 0, yoffset = 0, xadvance = 0, page = 0, chnl = 15},
[125] = {x = 0, y = 0, width = 0, height = 0, xoffset = 0, yoffset = 0, xadvance = 0, page = 0, chnl = 15},
[126] = {x = 0, y = 0, width = 0, height = 0, xoffset = 0, yoffset = 0, xadvance = 0, page = 0, chnl = 15},
}
They are not in order so 32 is not A, so make sure to do all of them before playtesting!
Yeah, we’re sorry but this the only way we found!
WRONG!!! We Just Released A New Plugin! https://create.roblox.com/store/asset/85538084957433/Font-Converter
The module that we need the big text for is FontData, so just replace that one with the one you just made!
You might also noticed there is a ImageID String in the font folder as well so upload the font image
[Example: ]
And get the imageID of it and change it inside the ImageID string value.
After this inside the “ExampleUsage” script (if you are looking at the demo place) inside the
Text.new("November", true)
change “November” to what your font is (has to be inside ReplicatedStorage > Text > Fonts)
A demo script showcasing a basic text generation:
-- @LogicUndefined
-- @N_ckD
repeat task.wait() until game:IsLoaded()
local ReplicatedStorage = game:GetService("ReplicatedStorage")
local Players = game:GetService("Players")
-- Require text module
-- For more configuration, read the text module.
local Text = require(ReplicatedStorage.Text)
-- Create the text gui that the text must be parented to.
local TextGUI = Text.GetTextGUI(1)
-- Parent the text gui
TextGUI.Parent = Players.LocalPlayer.PlayerGui
-- Let's create a testing text.
local text = Text.new("November", true)
--[[
@param [font_name: string] The name of the font to use. Found in the "Fonts" folder under the text module.
@param [automatic_update: bool] Whether or not to automatically update the text every render step.
If you choose not to update the text automatically, you will need to manually call text:Update(delta_time) whenever necessary.
@returns [text: Text]
]]
-- Parent the text to the text gui
text.Parent = TextGUI.TextParent
-- Position the text in the center.
text.Position = Text.GetVirtualResolution() / 2
-- Center the text.
text.TextCentered = true
-- Set the text size. This is a factor of scale.
text.TextSize = 2.3
-- Display some text.
text.Text = "Hello World!"
Then just play the game and look at the brand new font you just made! Congratulations !!
This is my first ever #resources:community-resources Post so please let me know what I can improve on and and tips are appreciated! If you need any help please don’t hesitate!