Use custom fonts for mobile guides

You can use your app's fonts in mobile guides so your guides have the same look and feel as your application.

To use custom fonts, you need to add them to your app's Theme and assign them to visual elements in your guide.

Define a custom font

1. Go to Guides > Themes to update your app's theme. 
2. Select a specific typology in your theme, for example Title.
3. On the Title Styles side panel, select the Family dropdown, which lists all the supported iOS and Android system fonts.
4. Select + Manage custom fonts.
   
   
   
5. Type the font file name as defined in your app. Use the exact file name used by your app. The file name is case sensitive.
6. If you have several font files, you can add them all, for example, bold or italic.
7. Select the new font you added in any of the theme-specific typologies, such as Title, Primary Button, or other options.

Test the guide with the custom fonts

You can test that the custom font is configured correctly by creating a guide using the typology you define and verifying that the custom font is displayed correctly in your device.

To test the custom fonts in the guide, go to Guides > Guides and:

1. In the Guides list, select a mobile guide.
2. In the guide's details page, select Manage in my app.
3. Create a custom theme for mobile apps, and give that theme one or more custom fonts.
4. In the Visual Design Studio, apply the custom theme you created to the guide. 
5. Edit the settings for the text, not including the label.
6. Verify that custom fonts can be selected and previewed for that element.

Mobile custom fonts aren't supported by the browser so you won't see the font in the web preview of the guide. 

 You can edit and remove a custom font any time by accessing + Manage Custom Fonts

Custom fonts for Android

• The font file should reside under the following path: "/res/font"
• Supported font formats: XML, TTF.

[Android custom fonts location]

Custom fonts for iOS

Supported font formats: TTF and OTF.