How to customize fonts in React Native
Tags: reactnative, fonts, customize, style
Published: 2022-06-23 19:38:27

## Introduction

At Rootstrap, my first assignment was to develop a React Native application, that involved maps, chat, and following the design specifications to the letter. While doing this, one of the first things I tried was to set the family font that the application uses, and I found out it wasn't as easy as I expected.

The biggest issue was that all the tutorials said to execute `react-native link`, which in my experience was a bad idea because afterwards the application stopped building successfully. This occurs because since React Native 0.60 released, there is a property called Autolinking that changed how to link a library, as [this post](https://aboutreact.com/react-native-autolinking/) explains.

## Overview

In this tutorial, you will learn how to add and link fonts manually, without using the link command.

First, you will see all the configurations that need to be done to use custom fonts and then you will learn its usage in a simple application.

## Configuration

### Create Project

First of all, you should create a project in react native. To do that, open the terminal and navigate to the folder you want to create your project in, and execute:

```sh
react-native init customize_fonts_react_native_tutorial
```

### Install libraries

After creating the project, some libraries need to be installed:

```sh
cd customize_fonts_react_native_tutorial
npm install --save react-native-global-props
npm install --save babel-plugin-module-resolver
```

### Download and rename fonts

Since this is a tutorial about customizing fonts, you will need to have some fonts downloaded, in order to add them to your React Native project.

There are many places where you can get these customized fonts. For this tutorial, I used two different fonts, [GoodFeelingSans](https://www.wfonts.com/font/good-feeling-sans) and [Dan'sDisney](https://www.fontspace.com/dans-disney-font-f24536). In both cases, I ended up with a .ttf file.

In iOS, it is important for the font filename to be the same as its PostScript name. To find the PostScript name, open your `ttf` file with Font Book, see what its PostScript name is and rename the font to it.

![Font Book](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9sa4mk98me2ie5jrt8cg.png)

### Configurations in React Native

To use your custom fonts in a React Native project, each platform requires a different configuration, but there are also some general configurations all platforms need.

#### General

In both cases, you will need to create these folders in your project's root: **src/assets/fonts**. Inside the fonts folder, you should add you custom fonts .ttf files, one for every font you want to use.

Also, modify **babel.config.js** adding this code:

```js
plugins: [
    [
      'module-resolver',
      {
        alias: {
          assets: './src/assets',
        },
      },
    ],
  ],
```

#### Android

In Android, you need to add this folders into android/app/src/main/ : **assets/fonts**. You should also add your `ttf` files to the fonts folder.

#### iOS

In iOS, the configuration is a little more tricky. You need to go to **ios/** folder and open the
**customize_fonts_react_native_tutorial.xcodeproj** file with Xcode.

Afterwards, you need to press on **customize_fonts_react_native_tutorial -> Build Phases** and find the **Copy Bundle Resources** section.

![Add fonts IOS](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/epeff1r1egnhm7gc1uwj.png)

You should add your fonts by pressing the plus symbol, then **Add Other...** option, select your fonts from your src/assets/fonts folder and **Finish**.

![Fonts selection](http://g.recordit.co/QpziFaqrls.gif)

## Usage

Finally, after all these steps you will be able to use customized fonts in your React Native project.

As an example, you can create a very simple screen, just to test everything is configured correctly. Add in src folder App.js and styles.js files.

App.js:

<script src="https://gist.github.com/ManuViola77/8ef19537877f00114dbaee49b1f44752.js"></script>

```js
import React from 'react';
import {SafeAreaView, Text, TextInput} from 'react-native';
import {setCustomText, setCustomTextInput} from 'react-native-global-props';
import styles from './styles';

const App = () => {
  const customTextProps = {
    style: {
      fontFamily: 'GoodFeelingSans',
    },
  };

  setCustomText(customTextProps);
  setCustomTextInput(customTextProps);

  return (
    <SafeAreaView style={styles.container}>
      <Text style={styles.header}>How to Customize Fonts in React Native</Text>
      <Text style={styles.textDefaultFont}>
        This is the default font (GoodFeelingSans)
      </Text>
      <Text style={styles.textDifferentFont}>
        This is a different font (DansDisneyUI)
      </Text>
      <TextInput value="This input has default font" />
      <TextInput
        value="This input has a different font"
        style={styles.inputDifferentFont}
      />
    </SafeAreaView>
  );
};

export default App;
```

styles.js:

```js
import {StyleSheet} from 'react-native';

const differentFont = "Dan'sDisneyUI";

const styles = StyleSheet.create({
  container: {
    alignItems: 'center',
    flex: 1,
    justifyContent: 'space-around',
  },

  header: {
    fontSize: 18,
    fontWeight: 'bold',
    margin: 15,
    textAlign: 'center',
  },

  inputDifferentFont: {
    fontFamily: differentFont,
  },

  textDefaultFont: {
    fontSize: 16,
    marginVertical: 15,
    textAlign: 'center',
  },

  textDifferentFont: {
    fontFamily: differentFont,
    fontSize: 16,
    marginVertical: 15,
    textAlign: 'center',
  },
});

export default styles;
```

Also modify **index.js** to point to new ./src/App instead of ./App.

In this app, you are using the `react-native-global-props` library to set a custom font as default, in case you have an entire app with some default font. This is not necessary if you don't need it, you can just set the custom font only in the texts you want. Note how you can still do this even if you define a default custom font. Also note that there are two different default settings, one for the Text component and another for the TextInput.

Now, if you execute `react-native run-ios` or `react-native run-android` you should see the text with your custom fonts.

![Results in IOS](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/84zonvv5u2x8q9vka206.png)

## iOS "Unrecognized font family" error

After following all these steps, if you are getting the very common **Unrecognized font family** error, there are still some things you can check or do.

First, you should check your **info.plist** file, located in the **ios/customize_fonts_react_native_tutorial** folder. This file must have a section with key **UIAppFonts** that contains an array of strings with your fonts. If this is missing, then you should add this:

```xml
<key>UIAppFonts</key>
	<array>
		<string>GoodFeelingSans.ttf</string>
		<string>Dan'sDisneyUI.ttf</string>
	</array>
```

If your project has multiple build targets, you should apply this change to their respective **info.plist** files.

After this, if you are still getting the error, you could try doing some (or all) of the things listed below:

- Uninstall app from simulator (or device)
- Delete **node_modules** folder, **package-lock.json** file and execute **npm install**
- In **ios** folder delete **Pods** folder, **Podfile.lock** file and execute **pod install**
- Reset cache by runnning **npm start --reset-cache** command

I hope after doing all this, you now have your new custom fonts working!

## Summary

In this tutorial, you learned how to add, link and use custom fonts in React Native. You can find the GitHub project [here](https://github.com/ManuViola77/customize_fonts_react_native_tutorial).

Read this article and more content in the Rootstrap blog: https://www.rootstrap.com/blog/how-to-customize-fonts-in-react-native/