Skip to main content


         This documentation site is for previous versions. Visit our new documentation site for current releases.      
 

Modifying the application skin for font customization

Updated on February 23, 2022

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:
    ChoicesActions
    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.
  • Previous topic Modifying the fonts settings file for font customization
  • Next topic Replacing the icon font in imported applications

Have a question? Get answers now.

Visit the Support Center to ask questions, engage in discussions, share ideas, and help others.

Did you find this content helpful?

Want to help us improve this content?

We'd prefer it if you saw us at our best.

Pega.com is not optimized for Internet Explorer. For the optimal experience, please use:

Close Deprecation Notice
Contact us