Easiest Way to Load Your Custom Fonts in React Native

3 min readJul 30, 2017

Default fonts of React Native are really readable(for me). So I think you don’t have to change fonts if it’s unnecessary. But someday, your clients, designer, otherwise your design sense will ask you to change your app fonts making it more attractive.

Today I want to introduce how to implement your custom fonts in React Native app. Especially I focus on method of iOS app today. In this article, I’m using following version React Native.

"react-native": "0.46.4"

Installing your custom fonts to your RN app

Recently, React Native app projects are really easy to install your custom fonts. The steps are following:

Define assets directory in pachakge.json
Put your fonts file in your assets folder
Run link command: reac-native link
Re-run your project: react-native run-ios
Define fontFamily style and apply it to Text component

Almost of preparing gonna be finished in terminal :). OK, Let’s begin!

Define assets directory in `package.json`

Using your custom fonts, you need to install your custom fonts to your Xcode project. So, first let’s define your custom fonts directory in package.json. The example is below:

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

This is not path forfonts file. Path of directory which has fonts file.

In this case, your project directory should be like this:

...
android/
ios/
fonts/
index.ios.js
index.android.js
...

See rnpm doc for more detail https://github.com/rnpm/rnpm#user-content-advanced-usage

Put your fonts file in your assets folder

You just put your fonts file in your defined assets directory. Project directory structure must be like this:

...
android/
ios/
fonts/[YOUR_CUSTOM_FONTS].ttf
...

Run link command

After that, you can link those fonts with Xcode project using one command:

react-native link

Re-run your project

Linking your font, you should re-run your project. This is NOT reload⌘ + r . You need to build again.

react-native run-ios

Define fontFamily style and apply it to Text component

Now, your fonts is ready to use! Then, you just define your custom fonts as a style of fontFamily and pass it to Text component:

...
export default class myApp extends Component {
  ...
  render() {
    return (
      <Text style={styles.myCustomText}>Wow, it looks different.</Text>
    )
  }
}const styles = StyleSheet.create({
  myCustomText: {
    fontFamily: 'YOUR_CUSTOM_FONT_NAME',
  },

})

Troubleshooting is following:

What is fontFamily name of my fonts?

Usually, it is file name without an extension. If not so, see your font full name using finder command + i or, see your Font Book to check font family name.

Unrecognized font family ‘YOUR_DEFINED_FONTS_FAMILY’

If you get a red screen with this message, it might be wrong font family name. Check your font family name. And make sure you built your app after you linked your custom fonts.

I want to add font again!

You just follow step from №2.

Wrapping up

Good fonts really impress an app favorably. If you’re thinking you would like to create great app, choosing font is important. In the web, we can use Web Font system as the same way, but it contains performance issue. So in a mobile app, this is the advantage of expression compared with a web app. Let’s start creating your attractive app with custom fonts.

Next time, I will give you how to manage that fonts effectively in React Native app.

Cheers! 🍺