Hi there =) In this tutorial, I will show you how
you can vastly improve your Workflow of using a lot of different Fonts from
the same Family in Text Mesh Pro. We are going to use Style sheets in
the second part of this tutorial. If you don’t know what they are or how they work,
I made a video on them - you’ll find it here. A bit of an intro about font families
and how fonts work in general. This is going to be important to understand
why we need all this in the first place. Font families are groups of fonts belonging
together - here for example is the font family of the font Roboto. They are most often
consisting of several so called "weights": Thin, Regular, Medium, Bold, and so on,
all with corresponding italic styles. The range of fonts helps designers to
craft a consistent look of a product, while still having a couple alternatives
to choose from where needed and making sure the letter’s shapes lend themselves
to being easily read and understood. These different styles are important, because if
your font doesn’t have a dedicated Bold weight, for example, your system will try to be helpful
and make one for you. The results can be quite hideous, though. Also, this happens all the time
while working with TextMeshPro, for example. Alright, I hope it became clear why it is
important to use a font family if more than one weight of a font is needed in your game.
The question of how to use them remains. When I started out, I created a Font Asset
for every style and dropped it in by hand into every text field and saving them
as prefabs. Every. Single. One. Of them. This got super tedious super fast and if I
wanted to for example bold words inside the text, they were set to faux bold, too, no matter if I
had the correct font style in my project or not. Instead, let’s set this up correctly so these kinds of headaches will
live in the past from now on. Step one stays the same: I am setting the
font in my text field to bold via the button, so it becomes clear when the switch from faux to
true happens. You can try it with italic, too. Click on your main font style you plan to use
the most. For me, that’s the regular weight. Down here, you can see “Font Weights”.
Drop your created Font assets into the corresponding fields. You only need to set this
up once on your main font asset, don’t worry. Did you see this? As soon as
I dropped in the Bold style, TextMeshPro switched from the self-made
faux bold to the correct bold weight. By the way, down here, you can
see the values TMP will use to mimic bold and italic styles for your fonts. Alright. With this done, you can now correctly use italic and/or bold by highlighting
your chosen text and clicking here. But, as you saw in the beginning, you
can use much more than just Regular, Bold, Italic and Bold Italic. I added Black and Black-Italic to my list of
supported weights, too, so - how to access them? The simple version for one-off purposes is to
write <font-weight=”900”> (which corresponds with the Black style) with its corresponding closing
tag around the part we want to be affected. The much better and easier to maintain
version will be using Style Sheets. Create a new style sheet entry with a
useful name. I will use “Black” for this. Pick a name you’ll easily
understand inside your project. Enter the font-weight code into the
opening and closing tag fields. For me, that’s font-weight=900. Check your font
family if you’re not sure which one you need. Now you can apply this weight either to the whole
text box via the drop down labeled “Text Style”, or by using an inline style like this to
limit the use to only parts of your text. So, if the results of font-weight
and style=”Black” are the same, why use a Style Sheet at all, though? Easy - you can change the tags in your style sheet
at any time and the changes will instantly be applied to every place you used it. Let’s recolor
this style, for example. I add this color tag to it, close the tag and all the instances will be
recolored and still use the Black font weight! I hope you enjoyed this tutorial! I love
typography and hope you guys will find working with fonts at least a bit easier
now. Please let me know if you learned something or if something wasn’t as clear as
I hoped it to be :) Thank you for watching!
