Font

Custom fonts can be added to an app and used throughout the configuration.

Font files are stored in the ./font directory.

Quick guide

To use a custom font in your app, add the font file to the ./font directory.

./font/
└── Barlow-Regular.ttf

The font can then be referenced in the configuration using the font property and its name.

{
  "type": "text",
  "value": "This text uses the Barlow-Regular font.",
  "font": "Barlow-Regular"
}

note

The font property uses the font name without the file extension.

Font files

./font directory

All font files must be placed in the ./font directory.

./font/
├── Barlow-Regular.ttf
├── Barlow-Bold.ttf
└── Palatino Linotype.ttf

Font formats

Mos. supports the following font formats:

Format	Android	iOS
.TTF	Yes	Yes
.TTC	Yes	No
.OTF	Yes	Yes

Font filenames

The font filename must match the font's PostScript name.

This is particularly important because Android and iOS resolve the font name differently:

• Android uses the font filename.
• iOS uses the font's PostScript name.

For example, the font file Barlow-Regular.ttf must have Barlow-Regular as its PostScript name.

./font/
└── Barlow-Regular.ttf

note

Font names can also contain spaces.

This means that both the filename and the font value in the configuration are written with spaces.

./font/
└── Palatino Linotype.ttf

{
  "type": "text",
  "value": "This text uses the Palatino Linotype font.",
  "font": "Palatino Linotype"
}

Using fonts

Custom font

Use the font property to specify which font should be used.

./font/
└── Barlow-Regular.ttf

{
  "type": "text",
  "value": "This text uses the Barlow-Regular font.",
  "font": "Barlow-Regular"
}

Multiple fonts

You can use multiple font families in the same app.

./font/
├── Barlow-Regular.ttf
└── Palatino Linotype.ttf

"layers": [
  {
    "type": "text",
    "value": "This text uses the Barlow-Regular font.",
    "font": "Barlow-Regular"
  },
  {
    "type": "text",
    "value": "This text uses the Palatino Linotype font.",
    "font": "Palatino Linotype"
  }
]

Font families

A font family can contain multiple styles and weights, which can be added as separate font files.

./font/
├── Barlow-Regular.ttf
├── Barlow-Italic.ttf
├── Barlow-Light.ttf
├── Barlow-Medium.ttf
└── Barlow-Bold.ttf

"layers":[
  {
    "type": "text",
    "value": "This text uses the Barlow-Regular font.",
    "font": "Barlow-Regular"
  },
  {
    "type": "text",
    "value": "This text uses the Barlow-Italic font.",
    "font": "Barlow-Italic"
  },
  {
    "type": "text",
    "value": "This text uses the Barlow-Light font.",
    "font": "Barlow-Light"
  },
  {
    "type": "text",
    "value": "This text uses the Barlow-Medium font.",
    "font": "Barlow-Medium"
  },
  {
    "type": "text",
    "value": "This text uses the Barlow-Bold font.",
    "font": "Barlow-Bold"
  }
]

Troubleshooting

If the font is not displayed, check the following:

1. Is the font file located in ./font?
2. Is the font format supported?
3. Does the font filename match its PostScript name?
4. Does the font property match the font name used by the file?
5. Is the font supported on the target platform?