How to Add Custom Fonts in React Native (iOS & Android Guide)

Custom fonts are a powerful way to bring personality and brand consistency to your React Native app. Whether you’re building a sleek modern UI or matching your company’s design guidelines, adding custom fonts can make a significant visual impact.

However, installing custom fonts in React Native—especially across both iOS and Android—can feel tricky at first. Between file placements, project configuration, and platform-specific quirks, it’s easy to get lost in the setup.

In this guide, I’ll walk you through the step-by-step process to install and use custom fonts in a React Native project, covering both iOS and Android platforms. By the end, you’ll be able to easily integrate any .ttf font file and apply it consistently across your app’s UI.

✅ 1. Install the Inter font

Download the Inter font from Google Fonts or GitHub.

✅ 2. Add Inter font files manually (for React Native CLI)

1. Extract downloaded file and find .ttf files under static folder
2. Create a folder in your project, e.g.: your-project/assets/fonts/
3. Place the downloaded .ttf files in this folder.

✅ 3. Link fonts (React Native CLI only)

If using React Native CLI (not Expo):

a. Update react-native.config.js (at project root):

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

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

b. Link the assets with below command

npx react-native-asset

✅ 3. Verify fonts are registered

a. for ios check ios/your-project/ios/Info.plist, it should contains registered fonts

✅ 4. Use the Inter font in styles

import { React } from 'react';
import { SafeAreaView, Text } from 'react-native';

const App = () => {
  return (
    <SafeAreaView>
      <Text
        style={{
          fontSize: 50,
          fontFamily: 'Inter 18pt Thin',
        }}
      >
        Hello Wolrd !!
      </Text>
      <Text
        style={{
          fontSize: 50,
          fontFamily: 'Inter 18pt Bold',
        }}
      >
        Hello Wolrd !!
      </Text>
    </SafeAreaView>
  );
};
export default App;

import { React } from 'react';
import { SafeAreaView, Text } from 'react-native';

const App = () => {
  return (
    <SafeAreaView>
      <Text
        style={{
          fontSize: 50,
          fontFamily: 'Inter 18pt Thin',
        }}
      >
        Hello Wolrd !!
      </Text>
      <Text
        style={{
          fontSize: 50,
          fontFamily: 'Inter 18pt Bold',
        }}
      >
        Hello Wolrd !!
      </Text>
    </SafeAreaView>
  );
};
export default App;

🧠 Tips

✅ How to find the exact font name:

Sometimes, the fontFamily name you need to use in your code is not the same as the font file name. You can use the below method to find that out.

On macOS:

1. Double-click the font file to open it in Font Book.
2. Look at the name displayed at the top.
   • That’s the PostScript font name you need to use in fontFamily.

In this case fontFamily is “Inter 28pt SemiBold”