Ultimate guide to use custom fonts in react native
Adding custom fonts in react native project is very simple task with react-native link command but can be tricky if you are a new in react native .
I have decided to write article on all the possible issues which can occur while implementing custom fonts and give you detail information about how it will work.
Following are steps to link fonts(Using React Native Link Command):
1. First step (Set Font Naming For Cross Platform)
First step is to select a font family you want to use in your react native app. I have decided to use “SF UI Display” for my sample test project.
You need to check the file name before using it . Android will use the font name but in IOS it will use the “PostScript name”. It is tricky part let me explain to you.
Suppose i have above font files and i am using “SFUIDisplayBold” in my react native code it will work in ANDROID but not in IOS because the “postscript name” is “SFUIDisplay-Bold” . So for IOS you have to use “SFUIDisplay-Bold” despite of the fact that you have added font file with name “SFUIDisplayBold.otf”
You can check the “postscript name” of a font file in Font book
After renaming following are list of my font files .
Note : Although you can add logic in your code to use “SFUIDisplayBold” for Android and “SFUIDisplay-Bold” for IOS but it is better to rename the font .
Step 2 : Add Fonts to Assets
Next add all the font files you want to us in “assets/fonts” directory (It can vary)
Step 3 : Define assets directory
if React Native Version ≥ 0.60 (Detail)
Create File “react-native.config.js” and add following code
if React Native Version < 0.60
You need to tell react native where our custom fonts are located . Adding the following lines in your package.json
Path can vary. if you have “src” folder and you want to put assets in “src” folder then path will be “.src/assets/fonts/”
Step 4 : Link assets using react native link
For React Native Version ≥ 0.69
Due to autolinking, link and unlink commands have been removed in React Native 0.69.
Run in terminal
For React Native Version< 0.69
$ npx react-native link
link command will links fonts in Info.plst for IOS and creates fonts directory (android/app/src/main/assets/fonts) for Android, where copies your fonts
Step 5 : Use font in React Native Styles
Finally you can use font in styles by adding “fontFamily”
Side By Side Comparison After adding “fontFamily” in style
Manually Add/ Remove Fonts
After running react-native link you should see something like this in your terminal
This command will done all the hard work for you. Create “Resources” folder in xcode project ,copy files in “Resources” folder , add fonts in “info.plist” in , creates fonts directory (android/app/src/main/assets/fonts) for Android
There is no command for Unlink(Remove) assets you have to do it manually . So if you want to Unlink(Remove) fonts or manually add fonts without react native link command following are steps
Step 1 : Add/Remove fonts to android project in following directory
Step 2 : Add/Remove fonts to “Resources” folder in xcode project
Note : Just Drag the fonts in xcode “Resources” folder and check “Copy items if needed” . Add to target should be your project .For Detail see link
if files are copied correctly you can see the files in “Copy bundle resources” in “Build phases” tab
In case of remove please remove it from bundle resources
Step 3 : Add/Remove fonts in info.plist files in xcode project with key “Fonts provided by application”
You can see my demo project code on Github . I have tried by best to give you detail information about how to use custom fonts . Thanks for reading my article . Please clap if you liked it!