How To Use Custom Fonts in React Native

Break away from Helvetica, and give your users something more interesting to read

Tamas Szikszai
Oct 6, 2019 · 2 min read

Up until React Native 0.60, I was using package.json and RNPM to add my custom fonts to my projects.

Since 0.60, however, I was greeted with the following warning on every build:

warn Your project is using deprecated "rnpm" config that will stop working from next release. Please use a "react-native.config.js" file to configure the React Native CLI.

The solution is actually pretty simple, and I thought it warranted a short article.

Step 1: Adding the Assets

As a first step, create an assets folder in the root of your project. Then create a fonts folder inside it. Finally, copy your font files into the fonts folder.

Image for post
Image for post

Step 2: react-native.config.js

Create a file in the root folder of your project called react-native.config.js, and add the following:

module.exports = {
assets: ['./assets/fonts/']
};

Then, run the following command in your terminal:

react-native link

You should be greeted with something similar to this:

Image for post
Image for post

This should take care of copying the assets and creating references for both iOS and Android.

On Android, it will copy the font files to /android/app/src/main/assets/fonts.

On iOS, it will modify your Info.plist file to include references to your fonts, similar to this:

<key>UIAppFonts</key>
<array>
<string>Ubuntu-Bold.ttf</string>
</array>

Step 3: Use the Font

After you managed to link the fonts, using them is super easy. You can simply reference them by name in your style sheets, like this:

const styles = StyleSheet.create({
custom: {
fontFamily: 'Ubuntu-Bold',
fontSize: 32
}
});

Quick But Important Note on Naming

Android and iOS differs when it comes to referencing your fonts.

On Android, you can reference the font by its file name (case sensitive), while on iOS you should reference it by its name as described in its meta description.

To reduce the risk of confusion, try to name your file the same way as it shows up in FontBook (macOS) when you double-click on it. Failing that, you can always use platform specific code, like this:

const styles = StyleSheet.create({
custom: {
fontFamily: Platform.OS === "ios" ? 'AsCalledByFontBook' : 'some_filename.ttf',
fontSize: 32
}
});

And that’s all folks. Using custom fonts is very easy in React Native.

Better Programming

Advice for programmers.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store