Custom Fonts for Mobile Guides

You can use your app's fonts in mobile guides in order to keep your mobile guides with the same look and feel as your application.

The way to use custom fonts is to add them to your app's Theme and assign them to visual elements in your guide.

How to define a Custom Font

  1. Click on Guides -> Themes to update your app's theme. 
  2. Select a specific typology in your theme (for example 'Title').
  3. On the right-hand side, under 'Text Styles' open the Family dropdown.
  4. You will see a list of supported iOS / Android system fonts.
  5. Select "+ Manage custom fonts".
    mceclip1.png

  6. Type the font file name as defined in your application. Use the exact file name used by your app (case sensitive).
  7. If you have several font files, you can add them all (for example bold, italic etc).
  8. Now select the new font you added in any of the theme-specific typologies (Title, Primary Button etc).
  9. Test that the custom font is configured correctly by creating a guide using this typology and verifying that the custom font is displayed correctly in your device.
  10. Since mobile custom fonts are not supported by the browser, you will not be able to see the font in the web preview of the guide. 

mceclip4.png
Enter the font's file name as defined in your application

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

mceclip2.png
Manage custom fonts

Custom Fonts for Android

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

Screen_Shot_2019-11-21_at_11.01.41.png
[Android custom fonts location]

Custom Fonts for iOS

Supported font formats: TTF and OTF.