There are 2 types of font in Unreal - regular runtime fonts, and “offline” distance field fonts. The former is what you’ll use for UI widgets and such, but for in-world Text Render Components you need Distance Field Fonts.
The engine only comes with one, “RobotoDistanceField”, and there isn’t very much information online on how to create new ones. I’ve figured it out so I thought I’d post it here for both me in future, and everyone else.
Step 1: Install Fonts
For reasons that will become clear later, you need to have installed the font you’re going to use in Windows before you import it into your Unreal project. This isn’t a requirement for normal font use, but you will need it for distance field fonts.
Either open the font and click the Install button:
.. or select any number of fonts and right-click > Install.
Step 2: Import Font into Unreal
If you’re already using this font as a regular font, do not be tempted to duplicate it in UE as a starting point. Later on we’ll need to re-import the font and it won’t work if you’ve duplicated the font from a regular one.
I recommend you create a separate sub-folder for distance field fonts. It’s much easier to deal with the import path when they’re separate, especially if you use the same font for both UI widgets and 3D text render components.
To import the font, either drag the .ttf/.otf into this sub-folder and choose to import when prompted, or right-click in the content dir and import. It’s important that the font be somewhere that you can re-import from again when needed in a later step.
When asked “Would you like to create a new Font asset using the imported Font Face as its default font?”, click “Yes”.
We don’t actually need the Font Face asset, but we do need the Font asset.
Once imported, find the “Font” asset (not the Font Face asset) in your content browser:
Then rename this to add a “DistanceField” suffix (or similar). That just helps us differentiate when searching for fonts which ones can be used with 3D Text Render Component vs UE Widgets.
Step 3: Turn into a Distance Field Font
Open the Font asset (not the Font Face asset).
- In the Details panel on the right, change “Font Cache Type” to “Offline”.
- Click “Yes” when asked if you’re sure
- You will now get an ugly Windows font chooser pop-up. This is why we had to install the font in Windows as well
- Pick your font again
- Select the variant (e.g. Bold) if you want that
- Choose a font size of around 36-48 so it’s large enough in the texture
- Back in the Details panel, scroll down to find these values:
- Set “Texture Page Width” & “Texture Page Max Height” to 512 to make the font fit better
- Check “Use Distance Field Alpha”
- If you like, limit the characters so it doesn’t try to fit everything. For English you can set “Chars” to
0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ,.;:'"@[]{}/\?!~<>-+=_&*^|
Important: This still isn’t a distance field font. Those settings don’t change anything until you re-import the font. You can’t do this from inside the Font window, so:
- Return to the content browser (Ctrl+B)
- Right-click your Font asset
- Click “Reimport” at the top of the context menu
It will take a few seconds but when you go back to the font it should look like a distance field font with contours of grey surrounding each letter (if it looks blank, just try zooming with the mouse wheel to make it refresh):
Step 4: Cleanup
You can now delete any “Font Face” assets in the distance field font folder, since they’re no longer referenced (they’re only used for Runtime fonts).
Step 5: Profit
You’re done! Enjoy using this font in your 3D Text Render Components.