> ## 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 React Native for the Userpilot SDK

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:

```javascript theme={null}
module.exports = {
  assets: ['./assets/fonts/'],
};
```

Then run:

```bash theme={null}
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):

```jsx theme={null}
<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:

```xml theme={null}
<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:

```jsx theme={null}
<Text style={{ fontFamily: 'YourFont-Regular' }}>Test</Text>
```

If it fails, check the name using:

```bash theme={null}
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

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

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