How to add Custom Font in React Native? - Solution

Without any discussion, let’s directly jump into the steps:

1. Download your desirable font. You can use Google font to find fonts.

2. After downloading, unzip it and open that font folder. There you will find a folder called ‘static’, open it and you will find your fonts as per font width and start installing. Click on the font and a window will open and there on the top you will find ‘Install‘ button. Install all the fonts which you required.

3. Now open your React Native project where you want to add custom font and inside the parent directory create folder named as ‘assets’ and inside ‘assets’ folder create one more folder named as ‘fonts’ and inside that ‘fonts‘ folder put all the fonts that you have installed.

4. Inside parent folder create file name as → ‘react-native.config.js‘ . Carefully note the file name and ‘-‘ and ‘.’

5. Inside ‘react-native.config.js‘, write the below code:

module.exports = {
  project: {
    ios: {},
    android: {},
  },
  assets: ['./assets/fonts'] // path should be correct
}

6. Now we have to link the font in order to use it. To link run the below command:

npx react-native-asset

7. To check either the fonts get linked or not, follow this step:

   In Android:

   Follow this folder folder pattern to check:

   parent folder → android → app → src → main → assets → fonts → all fonts will be displayed here

   In IOS:

   Follow this folder folder pattern to check:

   parent folder → ios → [Your Project Name Folder] → Info.plist

   Inside ‘Info.plist’ file, you can see your fonts at bottom like the below image:

   

   Hurry! You have learnt to setup custom font in React Native 🎉

Now how can you use those fonts in your React Native project? - Solution

Just use style={{fontFamily: ‘Inter_18pt-Black‘ }}

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

const App = () => {
  return (
    <SafeAreaView style={{flex: 1, backgroundColor: '#fff'}}>
      <View>
        <Text style={{fontFamity: 'Inter_18pt-Black'}}>Hello Coder!</Text> {/* Comment: Inter_18pt-Black is one of my font name */}
      </View>
    </SafeAreaView>
  )
}

export default App

If you find this helpful, your feedback would be appreciated.