It is strongly recommended that you use a custom font in your Zebble apps, to ensure its availability and consistency on every device and every platform.

Understanding font files

Font files are distributed as ttf or otf files. A font often comes in different variants for different weights and styles, such as thin, bold, italic, etc.

Although it's possible to provide multiple variants in a single font file, but some font providers isolate them into separate files.

For example:

• SFProText-Light.otf
• SFProText-LightItalic.otf
• SFProText-Regular.otf
• ...

In those cases, even though they are all logically one font, but in terms of programming you have to treat them as different fonts completely.

As a best-practice, define all your fonts centrally in the Settings.scss file as variables. For example:

$font-light: "SFProText-Light.otf#SF Pro Text";
$font-regualr: "SFProText-Regular.otf#SF Pro Text";
$font-italic: "SFProText-LightItalic.otf#SF Pro Text";
$font-bold: "SFProText-Semibold.otf#SF Pro Text";

In the above exmple, you can see that the font name is added as a suffix to the font file name.
This is an important step to make it work on all devices.
You can find the font name by opening the font file in Windows.

Installation

1. Copy the ttf and otf font files into the following directories:
   • Run\iOS\Fonts
   • Run\Android\Assets
   • Run\UWP\Assets\Font
2. In Visual Studio, navigate to those folders and include them in the project with the action set as:
   • Android: AndroidAsset (Copy if Newer)
   • UWP: Content (Copy if Newer)
   • iOS: Content (Copy if Newer)
3. In iOS, add the following markup to your info.plist:

<key>UIAppFonts</key>
<array>
   <string>Fonts/YOUR-FONT-NAME.ttf</string>
   <string>Fonts/YOUR-OTHER-FONT-NAME.ttf</string>
   ...
</array>