DEV Community ๐Ÿ‘ฉโ€๐Ÿ’ป๐Ÿ‘จโ€๐Ÿ’ป

DEV Community ๐Ÿ‘ฉโ€๐Ÿ’ป๐Ÿ‘จโ€๐Ÿ’ป is a community of 963,673 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Cover image for Add Custom Fonts in React Native 0.63 for iOS and android
Aneeqa Khan
Aneeqa Khan

Posted on

Add Custom Fonts in React Native 0.63 for iOS and android

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.

fonts folder

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'],
};
Enter fullscreen mode Exit fullscreen mode

Link assets to project

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

npx react-native link
Enter fullscreen mode Exit fullscreen mode

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.

Alt Text

And you are done! ๐ŸŽ‰ ๐ŸŽŠ

You are welcome to share your thoughts in comments

Top comments (25)

Collapse
 
256hz profile image
Abe Dolinger • Edited on

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.

Collapse
 
aneeqakhan profile image
Aneeqa Khan Author

Thanks!

Collapse
 
obkurucu_ profile image
ozankurucu

Thanks.

Collapse
 
waseemkhanyes profile image
Waseem

"unrecognize font family font_name"

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

Collapse
 
aneeqakhan profile image
Aneeqa Khan Author

Please go through this link
hopefully it will solve your problem

Collapse
 
mathiuskormasela12 profile image
Mathius Kormasela

Thanks, you saved me

Collapse
 
das2108 profile image
DAS2108

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

Collapse
 
aneeqakhan profile image
Aneeqa Khan Author

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.

Collapse
 
nxtsuki profile image
nxtsuki

Very nice thread, worked for me!

Collapse
 
aneeqakhan profile image
Aneeqa Khan Author

Thank you!

Collapse
 
hosar profile image
Hosar

Thanks a lot, it saved my day.

Collapse
 
dzulfahmi profile image
Fitra Zul Fahmi

Thanks

Collapse
 
dayrimax91 profile image
Dayri Garcia Brito

Me funcionรณ. Muchas gracias.

Collapse
 
cs1881 profile image
Charles

Nice concise for quick reminding ourselves the steps.

Collapse
 
kulsoom1 profile image
Kulsoom-1

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.

Collapse
 
aneeqakhan profile image
Aneeqa Khan Author

ahan. Thats great then

Collapse
 
mango3ree profile image
Vlad

Thanks!Working

Collapse
 
aneeqakhan profile image
Aneeqa Khan Author

Glad to hear this :)

Collapse
 
das2108 profile image
DAS2108

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

Collapse
 
aneeqakhan profile image
Aneeqa Khan Author

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.

Collapse
 
muhsarip profile image
muhsarip

how about setup that font on android? should i setup via xcode too?

Collapse
 
enestatli profile image
enestatli

npx react-native link is enough for Android. XCode is a development environment for macOS used to develop iOS.

Collapse
 
hamidehdl profile image
Hamideh

Short and useful, thank you.

Collapse
 
aneeqakhan profile image
Aneeqa Khan Author

thank you! :)

Collapse
 
yasirshahzad profile image
Muhammad Yasir

Baji isko use kese kren fontFamily main yeh to btaen

In defense of the modern web

I expect I'll annoy everyone with this post: the anti-JavaScript crusaders, justly aghast at how much of the stuff we slather onto modern websites; the people arguing the web is a broken platform for interactive applications anyway and we should start over;

React users; the old guard with their artisanal JS and hand authored HTML; and Tom MacWright, someone I've admired from afar since I first became aware of his work on Mapbox many years ago. But I guess that's the price of having opinions.