Modifying the application skin for font customization

You customize the fonts for the text that is displayed on native elements of your mobile app, for example, to conform to your company's branding or to improve readability. After you modify the fonts list for your mobile app, modify your application skin to display these fonts in the user interface.
Before you begin: Modify the fonts list. For more information, see Modifying the fonts settings file for font customization.
  1. In the header of Dev Studio, click the name of the application, and then click Skin.
  2. On the Component styles tab, click the More icon next to Dynamic layouts.
  3. Define the new configuration of your mobile app element that you want to customize:
    Choices Actions
    Bottom bar fonts
    1. In the Controls list, select Menus.
    2. In the Menus section, click the Inherited tab, and then click Mobile bottom navigation.
    3. In the Mobile bottom navigation section, click the override it link.
    4. Expand the Text header.
    5. Select Specify styles.
    Native header fonts
    1. In the Layouts list, click Containers.
    2. In the Containers section, click the Inherited tab, and then click Mobile header.
    3. In the Mobile header section, click the override it link.
    4. Expand the Text header, and then select Specify styles.
  4. In the Font family list, select other.
  5. In the Font family name field, enter the same value as in the JSON array that you configured in step Modifying the fonts settings file for font customization, for example, MyFontName.
  6. Click Save.
  7. Optional: To configure other formatting elements, repeat steps 3 through 6.
    For example: You can set a custom font for the primary level menu and submenu items, such as Inactive Text, Active Description Text, and Inactive Description Text.