Aneeqa Khan

Posted on Jul 28, 2020 • Edited on Dec 28, 2022

Add Custom Fonts in React Native 0.63 for iOS and android

#reactnative #tutorial #beginners #javascript

Adding Custom Fonts to React Native App is quite easy and only needs a few steps. I am writing down the steps I did to add custom fonts to my app.

Download Google Font

First, you need to download your desired fonts from google fonts.

Add fonts to app folder

Create a fonts folder in your src/assets folder on root directory level and paste downloaded fonts files in it.

Export fonts

Now create a file named react-native.config.js at the root of your app and add the path of fonts folder like this



module.exports = {
   assets: ['./src/assets/fonts'],
};

Link assets to project

After adding this, run link command in your project folder.



npx react-native link

Link command will add font files into assets folder in the android folder of your app and to info.plist file in the iOS folder.

Add resources to target

Now at this point, your custom fonts will start working for the android app but you need to do one last step to make it work for iOS.

Go to the desired target of your app in Xcode, select the Build Phases tab, and add font files in the "Copy Bundle Resources" tab as shown below.

And you are done! 🎉 🎊

You are welcome to share your thoughts in comments

Top comments (28)

Lauro • Dec 28 '22

Hi there, would you be able to update your article to clarify where you mean when you say src/assets please

It would be useful to know the exact path for both android and ios users. Let's assume the user is using expo with npx create-react-native-app.

I'm not certain from your description where to create the folder.

Is it

root/android/app/src
mkdir assets && cd assets
mkdir fonts && cd fonts

add files to fonts directory...

Aneeqa Khan • Dec 28 '22

Hi Lauro, Sorry it was confusing for you.
You need to create a src/assets folder on root directory level.
I'll update the article too.

Lauro • Dec 28 '22

I see the update. Thank you!

Abe Dolinger • Jan 7 '21 • Edited

Very helpful thanks! Using RN 0.63.3, it looks like the XCode step is done for us at the linking step. Just have to remember to rebuild the app after.

Aneeqa Khan • Jan 7 '21

Thanks!

ozankurucu • Nov 29 '21

Thanks.

Waseem • Sep 7 '22

"unrecognize font family font_name"

this error occurs when i add custom fonts in react native project
if follow above all steps
please help

Aneeqa Khan • Sep 8 '22

Please go through this link
hopefully it will solve your problem

Mathius Kormasela • Apr 23 '22

Thanks, you saved me

DAS2108 • Jul 14 '21

Can you tell me where did I go wrong? I got these error message, while trying to > npm run ios after font installation.

error: Multiple commands produce '/Users/dimasaaron/Library/Developer/Xcode/DerivedData/MyDoctor-bdkqxzbburdzwqcuvezmrndxlkgj/Build/Products/Debug-iphonesimulator/MyDoctor.app/Info.plist':
1) Target 'MyDoctor' (project 'MyDoctor') has copy command from '/Users/dimasaaron/Documents/ReactNative/MyDoctor/ios/MyDoctorTests/Info.plist' to '/Users/dimasaaron/Library/Developer/Xcode/DerivedData/MyDoctor-bdkqxzbburdzwqcuvezmrndxlkgj/Build/Products/Debug-iphonesimulator/MyDoctor.app/Info.plist'
2) Target 'MyDoctor' (project 'MyDoctor') has process command with output '/Users/dimasaaron/Library/Developer/Xcode/DerivedData/MyDoctor-bdkqxzbburdzwqcuvezmrndxlkgj/Build/Products/Debug-iphonesimulator/MyDoctor.app/Info.plist'.

Aneeqa Khan • Nov 19 '21

This error is because you might have duplicate resources. Check for duplicate resources in "Resource" folder in Xcode also try deleting content of "Derived Data" folder and run again.