Skip to main content
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>