Steps Involved To Add Custom Font In React Native App

In a competitive marketplace, custom fonts can help you stand out from the competition by creating a unique identity for your app.

Adding custom fonts to React Native has become much easier and more straightforward.

It is fairly easy to add custom fonts to a react native project using the react-native-asset command, however, it can be challenging if you are unfamiliar with react native.

We can find fonts from a variety of sources on the Internet, A popular resource for free and open-source fonts is Google Fonts.

Steps to Add Custom Fonts in React Native App

Create a font directory under assets in your project after downloading the fonts.
The font files should be either in .ttf or .otf format

In this project, I have used cabin font. it has been downloaded from google fonts.

project-root-directory/assets/fonts

Create a config file at the root of the project called react-native.config.js. Add the following code to the module.exports.

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

After react-native (0.69) was updated, the link command was removed. The font assets should be linked automatically with react-native-asset. If you want to add fonts to your project, run the following command.

npx react-native-assets

After running the above command,

for Android,
fonts automatically added in the android/app/src/main/assets/fonts directory

for ios,
fonts automatically added to the info.plist

After you can apply fonts to text in your project like this

after adding fonts to the project run the project with the below command.

//In ios
cd ios && cd ..
npm run ios

// In android
cd android && ./gradlew clean && cd .. && npx react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res
npm run android