DEV Community

Add Custom Fonts in React Native 0.63 for iOS and android

Aneeqa Khan on July 28, 2020

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. ...

Read full post

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.

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.