How to make clean big text renderers with custom fonts?

[dj-mindar]

This is not really a question but rather a detailed tutorial : I spent nearly 2 days to get exactly what I wanted, helped by several other partial answers here, so I think this will surely be useful for someone else.
My goal was to display the title of my game in a 3D main menu, using a huge text renderer with custom font, on a wall like this:

So here are the steps:

---

##1. Import Font

To a add custom font usable for a text renderer, you must create a new offline cached font. Indeed, there are 2 types of fonts used in UE4 : runtime cached fonts, for HUD/UMG texts (that’s what you get when you simply import a .tff file in the content browser) and offline cached fonts, for Text Renderers.

To make an offline cached font, find a .tff font anywhere on the internet and install it on Windows, then create a new font asset in the Unreal Editor and open it. Then, select “Offline” in the Font Cache Type section of the Details panel

This will open a Windows dialog box to select a font. Here select the custom font you previously installed, and choose the height you want for characters (between 20 and 24 is generaly good). When it’s done, your font will be imported with default options. You now need to modify some of the Import Options, in the Offline Font subpanel :

• Check Create Printable Only to discard all useless characters (generally including all missing characters of your custom font)
• Texture Page Width is 256 by default, set it to 512. (I’m not sure whether it’s THE best value, but it’s the one used in the default RobotoDistanceField font and it works very well)
• Check Use Distance Field Alpha to improve rendering of big-sized Text Renderers. If you don’t, characters edge will be all “pixelated-wavy” and the result will be totally aweful.
• Set Distance Field Scale Factor if you need : the higher the scale factor the better, but for an unknown reason, my editor systematically freezes when I leave the default value 16 or choose higher… but if I choose a value from 9 to 15, it works fine and the value 16 is then displayed… so I have to change the default value. (to 14 for example)
• Set Distance Field Scan Radius Scale if you want. The value must be comprised between 0 and 4 and impact on the characters edges sharpness : near 0, edges will be very sharp but also wavy like if Distance Field Alpha were unchecked; when you tend to 4, the edges become totally blurry and the letters get really thin. The default value 1.0 is a rather good compromise but you can tweak it if needed.

When everything is done, reimport your font by clicking on Asset>Reimport MyNewFont. Note that you’ll have to reimport like that each time you want to change a font setting, such as characters Height, or weight (if you want to use bold or italic for example)
Your font texture should now look like the default RobotoDistanceField, with its blurry gray edges.

Note that if you choose a too important height for your letters, you’ill get multiple Font Texture Pages. This is not very harmful, but remember that only the characters in the first page will be displayed correctly when using this font.
So you can ignore it if some few unused characters are banished in a second texture page, but get sure you have at least all of your letters in upper and lower case. But if you choose bigger height, your letters will be less “pixelated-wavy” also, so try to set the biggest height possible that makes all your useful characters fit in the first page.

---

##2. Create a Text Material

To use this font in a Text Renderer, you’ll now have to create a new matching TextMaterial. (I personnaly copy-pasted the engine DefaultTextMaterialTranslucent because I needed to control the opacity of my text to create a fade in effect)

This should look like this finally :

The important points are :

• Click on the Font Param node and select your newly created font as the Font parameter value
• Branch its gray output pin to the opacity, and not the default red one

Note that each time you tweak your font asset, this Font parameter value in the Text Material will not be updated, so you’ll have to clear it and then select again your font.
You can also notice a parameter Font Texture Page just under Font. It corresponds to the page used as texture for this material and, for the moment, you can only use one of them. So if your font is really huge and you absolutely need to display characters from several Font Texture Pages, you’ll be forced to create 2 Text Materials I guess (For example 1 for lower case characters and 1 for upper case characters) but I don’t see how this could possibly be a good idea… That’s why you must really make all you need fit in a single texture page.

Additionally, if you want to create a fade in / fade out effect to display your text, you just need to create an opacity-controlling parameter in your material, and multiply the opacity by its value as I did. Also be sure the Blend Mode “Translucent” is selected in the Material Details Panel

---

##3. Use in a Text Renderer

Once this is done, just create/select a Text Renderer and set the Font parameter value AND the Text Material parameter value with assets you just created. If you don’t change both, your text will be displayed as giberrish.
(I really think this should be done automatically by the way… I hope it will be modified in the next engine updates because I don’t see the point of allowing the user to select a font which is not the one referenced in the Text Material)

Hurray! It’s finished! You now have a pretty Text Renderer with custom font \o/

[anonymous_user_6e7b421a]

Great post dj-mindar! You should add this to the Forums and the Wiki for the entire community to have!

https://forums.unrealengine.com/forum.php

A new, community-hosted Unreal Engine Wiki

Cheers,

[DFin]

I think this really should be added to the offical documentation instead and not just the wiki. There is only “runtime fonts” for UMG in the documentation.

[EnricoUniverse]

Why is this not on the wiki!?

[GraphicsMode]

“Note that if you choose a too important height for your letters, you’ill get multiple Font Texture Pages. This is not very harmful, but remember that only the characters in the first page will be displayed correctly when using this font. So you can ignore it if some few unused characters are banished in a second texture page, but get sure you have at least all of your letters in upper and lower case.”

You can hand select the fonts you want to use by typing them into the “Chars” section, that way you can make sure all the glyphs you want to use are on the first (and only) sheet.
This works even better if you only need a few letters, for instance the 6 that re used in the words RED and BLUE, as you can then make them much bigger and still fit on the sheet.

[anonymous_user_7a9d1c68]

Hi
I have found a way to use different texture pages fonts.
Just change the texture page width and texture page max height to contain all of your letters!
Though it isn’t a good way to deal with the problem that fonts in lots of pages, but it works

It confused me lots of days, just due to my language has too much letters.
Your guide is really a great help for me:)

[anonymous_user_e835feb7]

Thank you so much for posting this. Helped my work a lot.

[joekr07]

Hi,

Thanks for the detialed post. However, I get some strange errors with vertical alignment when I use a custom font created according to the above with a TextRenderActor. See the attached screenshots for an example?
Anyone else enountered this problem?,

I used a arial font, and the reference image is with the default RobotoFont which works fine, I can’t find a single custom font where vertical alignment works. I am using Mac OS.

[Light_Shock]

The distance field scale factor freezing is because the system continues to process for about the same time again after the progress bar reaches 100% So you can set this higher than 15. You just have to wait a while after it looks like it has finished.

[Nellen]

I know I’m late, but I still have a problem.

As you can see, my text is still all wavy and stuff.
I’ve done everything according to the tutorial, and I even played around when the import settings (and I’ve updated it in the material editor every time), and it still looks like this.

I don’t know what to do, halp xD

[anonymous_user_3f4cafbb]

Try disabling antialiasing in the font import settings

[amstradcpcuser]

Hi, late here too, but im just curious. Im trying to make a textrender font from this (first image) but no matter what options i try (yes antialiasing off as well) this is what i get (second image) →

How can i fix it? or i am asking too much?
Thanks in advance.

[anonymous_user_8312749a]

use higher resolution fonts. also, try tweaking the distance field values if you haven’t already. i’m not sure how well your font will show up though; it’s VERY detailed.

[amstradcpcuser]

Thanks, but i already tried every value on the distant field section (thats why im asking…) and, i dunno exactly what you mean with “use higher resolution fonts”. I dont think thats the problem, the font itself has really high resolution already. Im assuming that textrender are limited in this matter? i mean, with simple plain fonts it works, with something like this… it wont?

[anonymous_user_8312749a]

it’s probably a textrender issue. after posting i remembered that fonts are stored as vectors so you would be right about it not being a resolution issue.

if you really want to use that sign in game i suggest making a texture and sticking it on a plane. you’ll need a fairly large texture but it will work. another possibility, if the camera angle is fixed, is to use a widget.

[amstradcpcuser]

Yup, the problem is, i needed to be a textrender so i could change the text value. I guess they still need to do a lot of improvements in the texrender component to be able to show fonts like these. It is not going to be a sign (the word says “sigh” , not “sign” ^^) but kinda a quest marker or something like that. Anyways, thanks, i guess i will go back to the regular monoplyzed UE roboto font lol.

[anonymous_user_8312749a]

well, a really hacky way to do it would be with plane cards for each letter. personalty, i would suggest a simpler font though, both so you can use a simpler system and to ensure high readability.

[amstradcpcuser]

Sure, i could use a simple font. And its probably what im going to do, but the point of my question was how to use these complex fonts. Before i got here i already knew how to do it with regular fonts, but i always had the same problem in the moment i tried with more complex fonts. And i guess it is the same problem as everybody else who tries to use similar fonts.

[anonymous_user_8312749a]

it’s probably an engine limitation and you can’t with the current system.

[anonymous_user_36c68e4a]

You need to increase the Height value in the offline font. The way this works is that it renders the detailed vector font into a texture. If your font height is only 25, you’re reducing all that vector detail to a 25 pixel square texture.

Under Import Options, set the Height to 200

Set the Chars field to “SIGH” so that it only adds those letters to the font.

Set the both Texture Page Width and Max Height to 512.

Asset->Reimport

You should get a 512x512 texture containing only those four letters at extreme detail. If you want to use this for other text as well, you will need to make the texture page larger and the font height smaller, to fit in all the letters you use.