Fonts

Embed the typeface a preset names, or set your own.

Embed the files

zinc and moss use fonts the platform ships. cobalt, iris, tide and plum name a family that your app has to embed. A theme names one family per platform and the recipes set fontWeight, so you have to register every weight under one family name. The expo-font config plugin does that on both platforms:

[
  "expo-font",
  {
    "ios": {
      "fonts": [
        "node_modules/@expo-google-fonts/geist/400Regular/Geist_400Regular.ttf",
        "node_modules/@expo-google-fonts/geist/600SemiBold/Geist_600SemiBold.ttf"
      ]
    },
    "android": {
      "fonts": [
        {
          "fontFamily": "Geist",
          "fontDefinitions": [
            {
              "path": "node_modules/@expo-google-fonts/geist/400Regular/Geist_400Regular.ttf",
              "weight": 400
            },
            {
              "path": "node_modules/@expo-google-fonts/geist/600SemiBold/Geist_600SemiBold.ttf",
              "weight": 600
            }
          ]
        }
      ]
    }
  }
]

List one file per weight the preset maps in fontWeight, then rebuild the native app. On iOS the family name comes from the font file; on Android it is the fontFamily you give. Loading with useFonts at runtime is not enough on Android. Each file becomes its own family there, and fontWeight has nothing to choose from.

Packages per preset

Your own typeface

A family that is not installed falls back to the system font, so a preset still works before you embed anything. To use your own typeface, set font on a preset:

const brand = {
  ...presets.iris,
  font: { body: { ios: 'Satoshi', android: 'Satoshi', web: "'Satoshi', sans-serif" } },
}