How to make clean big text renderers with custom fonts?
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 :
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 :
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/
For all of you all there who are having resolution errors, or the text is ruined... When first choosing the font on the "offline" option, choose the maximum size as well! You are probably importing font with size 10! Theory says you can change the font height as well instead of reimporting the suffiecient size.
answered Feb 19 '18 at 12:04 AM
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:)
answered Jul 27 '16 at 02:54 AM
Thank you so much for posting this. Helped my work a lot.
answered Oct 08 '16 at 03:45 PM
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
answered Aug 06 '17 at 01:31 PM
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.
answered Sep 09 '17 at 01:46 AM
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?
answered Sep 09 '17 at 07:15 PM
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.
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.
answered Sep 12 '17 at 07:32 PM
Follow this question
Once you sign in you will be able to subscribe for any updates here