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)
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...
?
Hi Lauro, Sorry it was confusing for you.
You need to create a
src/assetsfolder on root directory level.I'll update the article too.
I see the update. Thank you!
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.
Thanks!
Thanks.
"unrecognize font family font_name"
this error occurs when i add custom fonts in react native project
if follow above all steps
please help
Please go through this link
hopefully it will solve your problem
Thanks, you saved me
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'.
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.
Very nice thread, worked for me!
Thank you!
Thanks a lot, it saved my day.
Thanks
Me funcionó. Muchas gracias.
Nice concise for quick reminding ourselves the steps.
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.
ahan. Thats great then
Thanks!Working
Glad to hear this :)
Hi Aneeqa,
I Cant find Build Phase like your screencap in my xcode.
Could you please tell me, where I can find it?
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.
how about setup that font on android? should i setup via xcode too?
npx react-native linkis enough for Android. XCode is a development environment for macOS used to develop iOS.Short and useful, thank you.
thank you! :)