Resolving issues with rich text tags when using custom fonts in Unity

It’s a common issue, you want to use a font other than Arial for a Unity project. You go to grab something off of Google Fonts, or your favorite font site and dump the regular font file into your project. Eventually a case arises where rich text would be useful to emphasize some text in your game. Maybe you need to tell the player to press Ctrl+W to crawl forward. Maybe they need to be instructed to go speak to the Spirit Tree to collect the Orb of “Oops! I just led the bad guy straight to the thing I was trying to protect.” Regardless of your use case, it would be nice to be able to simply pop in some bold tags (like so: <b>bold text here</b>) and call it a day. Unity does support this. But sometimes it can get hairy. A problem arises due to how Unity recognizes font families. This can result in bold tags and italics tags yielding unexpected results.

The Goal

We want something like this. (In this example I am using the font Roboto)

The setup is clearly documented on Unity’s site. It should be easy. Just make a Text object under one of your Canvases, make sure “Rich Text” is checked, and go crazy with your tags.

Oh! And we forgot to bring the bold and italic versions of the font into the project’s Assets folder, so go grab those too.

The Problem

So you have done all of the setup above and expect it to work. But then you get this…

The text which is supposed to be bold gets completely messed up. It does not even look like the same font. That’s because it is not. Somewhere along the way the connection to the Roboto font family was never made by the special versions of the font. So the bold tags make the text object render Unity’s default bold font instead.

Fixing It

When I first bumped into this problem in Unity 5.5.0, I spent a few hours digging for a fix and only found abandoned forum threads. It looked hopeless, so I switched back to Arial and called it a day. Then I ran into it again in 2017.2, and decided to do a little experiment. This time I actually got it to behave properly. Here are my findings.

Adding Font Versions One at a time causes issues

I think this might be where most of the issues come from. Every time I added a font to my Unity project, used it, then added the font variant files to the project, rich text would break.

Installing the font may help on Windows

It also seems that this problem is less likely to occur when the fonts are actually installed in Windows. Often it is easier just to drag the font file(s) straight from your downloads folder to the Unity project. For the most part this works too. As long as Unity has the font file it can render it. But I have had varied success using this method with rich text. Additionally, when the font is properly installed, I have been able to get away with only adding one version of the font to the project.

The Surest Way to make it work

Even taking into account the above two points, I have still encountered issues with different orders of operations. So here is what I have found to be successful even if the project is already messed up.

Step one: Clean up

Delete all versions of the font from your project, and change anything that used it to use some other font. Close Unity. Then if you have installed the font already, navigate to C:\Windows\Fonts, find the font and delete it. Reopen Unity, save the project, then close it again. (I do this to make sure any references are out of Unity’s system. I’m not sure it actually does anything, but lots about this bug seems random, so it makes me feel better.)

Step two: Reinstall

Next, install all versions of the font. (For what we are doing, regular, bold, italic, and bold italic are enough) To do this navigate to where you downloaded the font files, double or right click on each one and click install.

Step Three: Add to Your Unity Project

You will want to add all versions of the font to your project at once. First, navigate to C:\Windows\Fonts and find your font. Double clicking on it should open a folder showing all the members of that font family that you have installed. Select all the versions of the font you want to use in your project by Ctrl+Left Clicking each file. Then drag them all into your Unity project at once.

Step Four: Use the Font

Make a test Text object, assign it to use the regular version of your font, and try some rich text tags. If they don’t work, check the font family of each version of the font. They should each be the same. If they are not, that is the problem. Otherwise, I am not sure what to tell you other than to make a test project and play around with some of these practices. It is a bug, so the best we can do in the meantime is play around it.

Best of luck!

UPDATE: Use Text Mesh Pro

Chances are you want a better way than faffing about, hoping that things magically work out. Well, if you have never tried Text Mesh Pro, now is the time. It solves this (and many other problems) beautifully. Poking though the example scenes folder, you will see that it gives you a lot of flexibility with rich text tags, alignment, inline sprites, animated effects, soft masking, and so much more.

So, how do you tell Unity to use a bold font when it sees a bold tag using Text Mesh Pro? First you will need to generate TMP Font Assets for each style of your font. TMP has a tool called the Font Asset Creator (accessed from Window -> TextMeshPro -> Font Asset Creator). Its use is on page 10 of their User Guide. Basically, you drag the font into the Font Asset Creator’s “Font Source” field, press “Generate Font Atlas”, then press “Save TextMeshPro Font Asset.” Of course you can tweak the settings; see the documentation for an in-depth look at what they do.

Once you generate and save font assets for all of your fonts, select the font asset for the normal variant. Expand the “Font Weights” section. You will see a 2X2 matrix with fields for TMP_Font Assets. Drag the assets you generated into the corresponding fields. Now when you use the normal TMP Font Asset on a TextMeshPro object, tags will behave properly.