Using custom fonts

You may want to use custom fonts in one of the following scenarios:

• The default fonts don’t have the glyphs you need (e.g. Chinese, Cyrillic, Arabic)
• You need a stylized look and feel for your app

In order to use a custom font, you must first create a TextMesh Pro Asset for that font, and place that under Resources folder. TMPro’s Font Asset Creater can be used to generate the required font asset.

After that, CSS font-face rule can be used to assign a name to that font asset to be used as a font-family inside CSS.

This works similar to the standard CSS font-face. A url or resource URL must be given as the src descriptor — local() is skipped, since Unity cannot hand out a system font as a font asset.

@font-face {
  font-family: "My Custom Font";
  src: resource("Fonts/my-custom-font/cyrillic");
}

:root {
  font-family: "My Custom Font";
}

This is also how ReactUnity defines the default font internally.

Declaring the weights of a family

A font asset holds one weight, so a family that has several is several assets. Write one @font-face per asset, all under the same font-family, and say which weight or slope each one covers.

@font-face {
  font-family: "Inter";
  src: resource("Fonts/Inter-Regular");
}

@font-face {
  font-family: "Inter";
  font-weight: 700;
  src: resource("Fonts/Inter-Bold");
}

@font-face {
  font-family: "Inter";
  font-style: italic;
  src: resource("Fonts/Inter-Italic");
}

From then on font-weight and font-style pick between them, so a heading or an emphasised run gets the drawn face rather than TextMeshPro’s synthetic bold and skew:

:root {
  font-family: "Inter";
}

h1 {
  font-weight: bold;
}

A weight with no face of its own takes the nearest declared one, so a family with only a regular and a bold face still answers font-weight: 500.

Falling back for missing glyphs

No single font covers everything, and a font asset draws a missing character as a box. font-family takes a list for this reason: the first font that loads draws the text, and the ones after it cover the characters it has none of.

:root {
  font-family: "Inter", "Noto Sans CJK", "Noto Color Emoji", sans-serif;
}

A name that no @font-face declares is skipped, so the list is also how one stylesheet can name a font that only some builds ship.