Using custom fonts

Registering fonts for your app

Using custom fonts with MobileUI is easy. By convention, the MobileUI Framework will look for true type fonts (TTF) within the assets folder path

/fonts/*.ttf

To install and use a font within a MobileUI project, proceed as follows:

1. Put the custom font file (comicsans.ttf as an example) into the fonts sub folder (create it, if it does not exist):
   
   [PROJECT-ROOT]/app-common/src/main/assets/fonts/comicsans.ttf

2. Reference the font from your TextView or any sub class via the fontFamily and corresponding style attributes:

<TextView fontFamily="Comic Sans MS" text="Great Font!"/>
<Button fontFamily="Comic Sans MS" text="Click me!"/>

Note: You need to know the correct family name that is given in the TTF metadata. Android Studio shows the name when you double click the TTF file. It is the first line in the font preview.

Referencing different fonts from the same family

To reference the different fonts of a font family, you can use their style attributes like bold, italic or oblique. Let's say, you have the following files from the Montserrat Font in your fonts folder:

Montserrat-Regular.ttf Montserrat-Bold.ttf Montserrat-Italic.ttf Montserrat-BoldItalic.ttf

Then, you would reference them with their family name and their corresponding attributes (that are encoded in the TTF metadata):

<TextView fontFamily="Montserrat"/>
<TextView fontFamily="Montserrat" fontWeight="bold"/>
<TextView fontFamily="Montserrat" fontStyle="italic"/>
<TextView fontFamily="Montserrat" fontWeight="bold" fontStyle="italic"/>

Alternatively, you can reference them with their fontWeight in numeric form:

<TextView fontFamily="Montserrat" fontWeight="400"/>
<TextView fontFamily="Montserrat" fontWeight="700"/>
<TextView fontFamily="Montserrat" fontWeight="400" fontStyle="italic"/>
<TextView fontFamily="Montserrat" fontWeight="700" fontStyle="italic"/>

The case of multiple family names

TTF files can contain multiple family names. One font, for which this is the case is

Montserrat-Thin.ttf

It has the family names Montserrat and Montserrat Thin. To reference the font, you have two possibilities:

<!-- Use the main family name (the shorter one) and the font's weight -->
<TextView fontFamily="Montserrat" fontWeight="250"/>
<!-- Alternatively use the more concrete family name (the longer one) -->
<TextView fontFamily="Montserrat Thin"/>