How to use custom font family in react-native app ?

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

module.exports = {
  project: {
    ios: {},
    android: {}, // grouped into "project"
  },
  assets: ["./assets/fonts/"], // stays the same
};

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

"rnpm": {
    "assets": [
      "./assets/fonts/"
    ]
  }

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

Run in terminal

$ 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”

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center"
  },
  welcome: {
    fontSize: 20,
    textAlign: "center",
    margin: 10,
    fontFamily: "SFUIDisplay-Bold"
  },
  instructions: {
    textAlign: "center",
    color: "#333333",
    marginBottom: 5,
    fontFamily: "SFUIDisplay-Semibold"
  }
});

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

android/app/src/main/assets/

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!