> ## Documentation Index
> Fetch the complete documentation index at: https://docs.userpilot.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Fonts

> Configure custom fonts in Flutter for the Userpilot plugin

Configure custom fonts in your Flutter project to work with the Userpilot Flutter plugin.

The Userpilot SDK loads fonts from the native app bundle using system APIs. This means fonts must be configured in both the Android and iOS projects for your app.

## Naming Font Files

The file name for a font must match the PostScript name of the font for your flows to properly load the custom font on both Android and iOS.

This is because in native Android apps, fonts are referenced by their resource name (which is the filename[^1]), while in native iOS apps, fonts are referenced by their PostScript name[^2].

On macOS, you can find the PostScript name of a font by opening it with the Font Book app and selecting the **Font Info** tab.

## Android Setup

For an Android app, the font files need to be copied to the expected directory: `android/app/src/main/assets/fonts`.

### Maintaining a Single Source of Truth for Font Files

To maintain a single source of truth for your font files, it is recommended to *move* the font files from `fonts` to `android/app/src/main/assets/fonts` and then update `pubspec.yaml` with the new path:

```diff theme={null}
fonts:
  - family: Mulish
    fonts:
-      - asset: fonts/Mulish-Regular.ttf
-      - asset: fonts/Mulish-Bold.ttf
+      - asset: android/app/src/main/assets/fonts/Mulish-Regular.ttf
+      - asset: android/app/src/main/assets/fonts/Mulish-Bold.ttf
```

Alternatively, you may copy the files to the expected Android directory and not make changes to `pubspec.yaml`.

## iOS Setup

For an iOS app, the font files need to be added to the Runner target in your Xcode project and be added to `<UIAppFonts>` in `Info.plist`[^3].

**Step 1. Add Font Files to Xcode Project**

1. Open the `Runner.xcodeproj` file in Xcode.
2. Select **File > Add Files to "Runner"**.
3. Navigate to `android/app/src/main/assets/fonts` in the file picker and select all font files.
4. Ensure `Runner` is checked for the **Add to targets:** option.
5. Click **Add**.

**Step 2. Update Info.plist**

Open `ios/Runner/Info.plist` and add an array entry for `<UIAppFonts>` with a value for each font file name:

```xml theme={null}
<plist version="1.0">
<dict>
    ...
    <key>UIAppFonts</key>
    <array>
        <string>Mulish-Regular.ttf</string>
        <string>Mulish-Bold.ttf</string>
    </array>
</dict>
</plist>
```

## Summary

Your project should look like this:

```
📁 android/app/src/main/assets
   📁 fonts
      📄 Mulish-Bold.ttf    // File name matches PostScript name
      📄 Mulish-Regular.ttf // File name matches PostScript name
📁 fonts                    // Now empty because files have moved to android project      
📁 ios
   📁 Runner
      📄 Info.plist         // <UIAppFonts> added
      📄 Runner.xcodeproj   // References to font files added
📄 pubspec.yaml             // Updated with font paths pointing to the android project
```

[^1]: "The resource name, which is either the filename excluding the extension..." [https://developer.android.com/guide/topics/resources/providing-resources](https://developer.android.com/guide/topics/resources/providing-resources)

[^2]: "When retrieving the font with `custom(_:size:)`, match the name of the font with the font's PostScript name." [https://developer.apple.com/documentation/swiftui/applying-custom-fonts-to-text/#Apply-a-font-supporting-dynamic-sizing](https://developer.apple.com/documentation/swiftui/applying-custom-fonts-to-text/#Apply-a-font-supporting-dynamic-sizing)

[^3]: Refer to [https://developer.apple.com/documentation/uikit/text\_display\_and\_fonts/adding\_a\_custom\_font\_to\_your\_app](https://developer.apple.com/documentation/uikit/text_display_and_fonts/adding_a_custom_font_to_your_app)

<Frame>
  [**For any questions or concerns please reach out to support@userpilot.com**](mailto:support@userpilot.com)
</Frame>