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

Tamas Szikszai
Oct 6 · 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.

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:

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.

Tamas Szikszai

Written by

Better Programming

Advice for programmers.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade