Fonts

Configure custom fonts in your React Native project to work with the Userpilot SDK. Custom fonts in React Native allow you to use your own .ttf or .otf font files across iOS and Android. This guide explains how to install, configure, and use them correctly.

Add Your Font Files

Create a folder in your project to store font files:

your-project/
  assets/
    fonts/
      YourFont-Regular.ttf
      YourFont-Bold.ttf

Register Fonts With React Native

Create or edit react-native.config.js at the root of your project:

module.exports = {
  assets: ['./assets/fonts/'],
};

Then run:

npx react-native-asset

This copies fonts to:

Android: android/app/src/main/assets/fonts
iOS: ios/YourProject/Resources

Android Setup

React Native automatically loads fonts from:

android/app/src/main/assets/fonts

You can use the file name (without extension):

<Text style={{ fontFamily: 'YourFont-Regular' }}>Hello</Text>

Notes

File names must not contain spaces.
Android uses the file name, not the internal font name.

iOS Setup

Step 1. Check Xcode Resources

Fonts must appear in: Xcode → Build Phases → Copy Bundle Resources If not, drag them from your project folder manually.

Step 2. Check Info.plist

You should see:

<key>UIAppFonts</key>
<array>
    <string>YourFont-Regular.ttf</string>
    <string>YourFont-Bold.ttf</string>
</array>

Step 3. Use PostScript Font Name

Some iOS fonts require using the PostScript name, not the file name. To get the name, create a quick test component:

<Text style={{ fontFamily: 'YourFont-Regular' }}>Test</Text>

If it fails, check the name using:

npx react-native-ps-fonts

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

Using the Font in JavaScript

<Text style={{
  fontFamily: 'YourFont-Regular',
  fontSize: 20,
}}>
  Custom font example
</Text>

For any questions or concerns please reach out to support@userpilot.com

Installation

Security

Data sync

Advanced

Add Your Font Files

Register Fonts With React Native

Android Setup

iOS Setup

Step 1. Check Xcode Resources

Step 2. Check Info.plist

Step 3. Use PostScript Font Name

Using the Font in JavaScript

​Add Your Font Files

​Register Fonts With React Native

​Android Setup

​iOS Setup

​Step 1. Check Xcode Resources

​Step 2. Check Info.plist

​Step 3. Use PostScript Font Name

​Using the Font in JavaScript

Add Your Font Files

Register Fonts With React Native

Android Setup

iOS Setup

Step 1. Check Xcode Resources

Step 2. Check Info.plist

Step 3. Use PostScript Font Name

Using the Font in JavaScript