Customizing fonts for the native mobile app components

Customize the fonts for icons and for text that are displayed on the header or the bottom bar of your mobile app to conform to your company's branding or improve readability.

Before you begin: Ensure that you perform the following tasks:

Get familiar with the general instructions for editing a skin rule. For more details, see Skin rules.
For applications that use UI Kit earlier than version 14, if you do not add the latest UI kit to your application stack do the following actions:
- Download the .woff font files with icons and text, and then convert them to the true type font (TTF) format. For more information, see Converting the icons font for imported applications.
- Manually create an empty pyMobileFontsList file in the context of your application. For more information, see Text File rules - Completing the Create, Save As, or Specialization form.

Set up the fonts for icons:

In the header of Dev Studio, click Create > Technical > Binary File.
In the Create Binary File form, in the Label field, enter a name of the font, for example MyFontNameRegular.

Note: A TTF file contains one font weight only. To use different font weights that belong to the same font family, repeat steps 1 through 9 and upload font files for each of the weights, for example regular, light, and bold.
In the App Name (Directory) field, specify the name of the folder for your font file, for example, myAppName.
In the File Type (extension) field, enter ttf.
Click Create and Open.
In the Edit Binary File form, click the Upload file button.
In the pop-up window, click Choose file, and then select the font file.
Click Upload file.
Click Save.
In Dev Studio, in the search text field, enter pyMobileFontsList, and then press Enter.
Expand the list of matches by clicking the arrow next to the pyMobileFontsList link, and then click the link that belongs to the UI-Kit-7 ruleset to open the text file rule.
Click Save as, and then save a copy of the pyMobileFontsList text file rule in the context of your application.
For each of the font files that you upload, in the pyMobileFontsList rule, add a JSON array as in the following example:
```
[{
    url: "myAppName/MyFontNameRegular.ttf", 
    fontFamily: "IconFontName", 
    css : "webwb/py-icons.css"
    type: "icons"
}]
```
If you are configuring the font for an imported application, set the fontFamily parameter to the same value as in the original .woff font.
Click Save.

Set up the fonts for text:

In the pyMobileFontsList rule, add an object with font information of type text to the JSON array.

The array now looks as in the following example:

[{
    url: "myAppName/MyFontNameRegular.ttf", 
    fontFamily: "IconFontName", 
    css : "webwb/py-icons.css"
    type: "icons"
  },
  {
    url:"myAppName/MyFontNameRegular.ttf",
    fontFamily: "TextFontName", 
    type: "text"
    }
]

Click the name of your application, and then click Skin.
On the Component styles tab, click the menu icon next to Dynamic layouts.
Customize the fonts by performing one of the following actions:
- To customize fonts that are displayed on the bottom bar of your mobile app, in the Controls list, click Menus, and then go to step 19.
- To customize fonts that are displayed on the native header of your mobile app, in the Layouts list, click Containers, and then go to step 23.
In the Menus section, click the Inherited tab, and then click Mobile bottom navigation.
In the Mobile bottom navigation section, click the override it link.
Expand the Text header.
Select Specify styles, and then go to step 26.
In the Containers section, click the Inherited tab, and then click Mobile header.
In the Mobile header section to the right, click the override it link.
Expand the Text header, and then select Specify styles.
From the Font family list choose other....
In the Font family name field, enter the value that you configured in the JSON object in step 15, for example, TextFontName.
Click Save.
Optional: To configure different formatting elements of the Mobile bottom navigation section, repeat steps 21 through 28 and set a custom font for the primary level menu and submenu items, for example Inactive Text, Active Description Text, or Inactive Description Text.

Result: Custom fonts override the default fonts that display on the header or the bottom bar of your mobile app. You can restore the original formatting from the Actions menu.

What to do next: Generate the mobile app distributable files that include the new styling. For more information, see Building mobile apps.