Aneeqa Khan

Posted on Jul 28, 2020

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

Then create a fonts folder in your src/assets folder 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

Discussion (23)

Abe Dolinger • Jan 7 '21 • Edited on Jan 7

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.

Mathius Kormasela • Apr 23

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.

nxtsuki • Aug 3 '20

Very nice thread, worked for me!

Aneeqa Khan • Aug 4 '20

Thank you!

Hosar • Nov 17 '21

Thanks a lot, it saved my day.

Fitra Zul Fahmi • Mar 25 '21

Thanks

Dayri Garcia Brito • Jan 7 '21

Me funcionó. Muchas gracias.

Charles • Jun 9 '21

Nice concise for quick reminding ourselves the steps.

Kulsoom-1 • Mar 22 '21

This helps, thanks! But I guess linking is doing the ios part for us as well so no need to add font files in Build Phases.

Aneeqa Khan • Mar 24 '21

ahan. Thats great then

Vlad • Aug 27 '20

Thanks!Working

Aneeqa Khan • Aug 31 '20

Glad to hear this :)

DAS2108 • Jul 14 '21

Hi Aneeqa,
I Cant find Build Phase like your screencap in my xcode.
Could you please tell me, where I can find it?

Aneeqa Khan • Oct 14 '21

you have to go into your project folder first in xCode then select your app target and there you will top tabs for "General", "Build Phases",... settings.