![](https://s3-ap-south-1.amazonaws.com/trt-blog-ghost/2023/01/1-5.png)
Table of Contents
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
![](https://s3-ap-south-1.amazonaws.com/trt-blog-ghost/2023/01/Screenshot-2023-01-02-at-3.28.11-PM-1.png)
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
![](https://s3-ap-south-1.amazonaws.com/trt-blog-ghost/2023/01/Screenshot-2023-01-02-at-4.16.03-PM-1.png)
![](https://s3-ap-south-1.amazonaws.com/trt-blog-ghost/2023/01/Screenshot-2023-01-02-at-4.03.23-PM-1.png)
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