x

Search in
Sort by:

Question Status:

Search help

  • Simple searches use one or more words. Separate the words with spaces (cat dog) to search cat,dog or both. Separate the words with plus signs (cat +dog) to search for items that may contain cat but must contain dog.
  • You can further refine your search on the search results page, where you can search by keywords, author, topic. These can be combined with each other. Examples
    • cat dog --matches anything with cat,dog or both
    • cat +dog --searches for cat +dog where dog is a mandatory term
    • cat -dog -- searches for cat excluding any result containing dog
    • [cats] —will restrict your search to results with topic named "cats"
    • [cats] [dogs] —will restrict your search to results with both topics, "cats", and "dogs"

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:

alt text

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

alt text

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 :

alt text

  • 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.

alt text

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 :

alt text

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/

Product Version: UE 4.8
Tags:
more ▼

asked Aug 16 '15 at 12:48 PM in Rendering

avatar image

dj-mindar
304 3 7 9

avatar image EnricoUniverse Oct 17 '15 at 09:43 PM

Why is this not on the wiki!?

avatar image GraphicsMode Feb 26 '16 at 02:39 AM

"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.

avatar image joekr07 Mar 22 '17 at 03:52 PM

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.

alt textalt text

avatar image Light_Shock Apr 09 '17 at 07:21 PM

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.

avatar image delcasda Jul 27 '18 at 03:47 PM

When I try to use the offline font on Android is gone, no text show up but on editor and local mobile preview works fine, any ideas?

(comments are locked)
10|2000 characters needed characters left

9 answers: sort voted first

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.

Cheers

more ▼

answered Feb 19 '18 at 12:04 AM

avatar image

Lucas-G-Farina
41 1 2 6

(comments are locked)
10|2000 characters needed characters left

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

https://wiki.unrealengine.com/Main_Page

Cheers,

Andrew Hurley

more ▼

answered Aug 17 '15 at 09:31 PM

avatar image DFin Sep 16 '15 at 10:11 PM

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.

(comments are locked)
10|2000 characters needed characters left

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:)

more ▼

answered Jul 27 '16 at 02:54 AM

avatar image

drag00nkkk
1 2 1

(comments are locked)
10|2000 characters needed characters left

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

more ▼

answered Oct 08 '16 at 03:45 PM

avatar image

M. Kwon
26 1 2 3

(comments are locked)
10|2000 characters needed characters left

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

alt text

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

textrenderer.png (901.8 kB)
more ▼

answered Aug 06 '17 at 01:31 PM

avatar image

Nellen
8 1 2

avatar image rizzin Sep 05 '17 at 06:08 AM

Try disabling antialiasing in the font import settings

(comments are locked)
10|2000 characters needed characters left

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) -> alt text

alt text

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

clipboard02a.jpg (119.8 kB)
clipboard02.jpg (315.8 kB)
more ▼

answered Sep 09 '17 at 01:46 AM

avatar image

amstradcpcuser
21 3 9 10

avatar image Nuclear Arbitor Sep 09 '17 at 10:16 AM

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.

(comments are locked)
10|2000 characters needed characters left

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?

more ▼

answered Sep 09 '17 at 07:15 PM

avatar image

amstradcpcuser
21 3 9 10

avatar image Nuclear Arbitor Sep 10 '17 at 08:02 AM

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.

(comments are locked)
10|2000 characters needed characters left

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.

more ▼

answered Sep 10 '17 at 04:25 PM

avatar image

amstradcpcuser
21 3 9 10

avatar image Nuclear Arbitor Sep 11 '17 at 03:10 AM

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.

(comments are locked)
10|2000 characters needed characters left

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.

more ▼

answered Sep 12 '17 at 07:32 PM

avatar image

amstradcpcuser
21 3 9 10

avatar image Nuclear Arbitor Sep 12 '17 at 11:51 PM

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

avatar image Chris Payne Jan 18 '18 at 11:55 AM

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.

(comments are locked)
10|2000 characters needed characters left
Your answer
toggle preview:

Up to 5 attachments (including images) can be used with a maximum of 5.2 MB each and 5.2 MB total.

Follow this question

Once you sign in you will be able to subscribe for any updates here

Answers to this question