A Guide on Using Custom Fonts in React Native

React Native provides several default font styles to choose from when building your application. However, to offer your app the originality and individuality it needs to stand out in a crowded market, you may occasionally need to use custom fonts.


Let’s learn how to apply custom fonts when building your next React Native project.


Understanding Font File Formats

With React Native, you can add custom font files to a project and customize the appearance of text elements in your apps. These custom fonts come in font files with different file formats. The files contain encoded styling information for a specific font typeface.

The most common font file formats you’ll use in React Native mobile development are:

  • TrueType Font (TTF): This is a common font file format that most operating systems and applications support. TTF files are relatively small and can contain many characters.
  • OpenType Font (OTF): It is similar to TTF but can also contain advanced typographic features. OTF files are larger than TTF files and not every application supports them.
  • Embedded OpenType Font (EOT): EOT files are compressed and can include digital rights management (DRM) information to prevent unauthorized use. However, not all browsers support EOT and it’s generally not recommended for use in modern projects.

When using custom fonts in a project, it is important to choose a font file format that meets the project’s needs. This may involve factors such as target platform support, file size, licensing requirements, and support for advanced typographic features.

Importing & Applying Font Files in React Native

You can download a font file from anywhere on the internet and import it into your personal React Native project to use. However, there are many good, safe websites to download free fonts from securely.

To import a font file into your React Native project, create an assets/fonts directory at the root of your project, and move font files into it.

customfonts1-4

The steps required to use custom fonts vary when working with a purely React Native-generated project or an Expo-managed React Native project.

React Native CLI

If you’re working with a React Native CLI-generated project, create a react-native.config.js file and define these settings inside it:

 module.exports = 
    project:
        ios: ,
        android:
    ,
    assets: [ './assets/fonts/' ],

This configuration tells the project to include font assets stored in the “./assets/fonts/” directory so that the app can access them when rendering text elements.

You can then link the assets folder to your project by running the following:

 npx react-native-asset

This will only work on newer versions of React Native apps from 0.69 up. Older React Native projects should run this command instead:

 npx react-native link

Now you can use the linked custom fonts as you normally would in your CSS styling by calling their exact name in the font-family style:

 <Text style=styles.fontText>Hello, World!</Text>

const styles = StyleSheet.create(
    fontText:
      fontFamily: 'Tilt Prism',
      fontSize: 20,
    ,
);

Expo-CLI

For Expo-generated projects, you should install the expo-fonts library as a dependency to import and apply custom fonts. Install it with this command:

 npx expo install expo-font

Now you can use expo-fonts in your project file like so:

 import React,  useState, useEffect  from 'react';
import Text, View, StyleSheet from 'react-native';
import * as Font from 'expo-font';

const CustomText = (props) =>
  const [fontLoaded, setFontLoaded] = useState(false);

  useEffect(() =>
    async function loadFont()
      await Font.loadAsync(
        'custom-font': require('./assets/fonts/CustomFont.ttf'),
      );

      setFontLoaded(true);
    

    loadFont();
  , []);

  if (!fontLoaded)
    return <Text>Loading...</Text>;
  

  return (
    <Text style= ...props.style, fontFamily: 'custom-font' >
      props.children
    </Text>
  );
;

const App = () =>
  return (
    <View style=styles.container>
      <CustomText style=styles.text>Hello, world!</CustomText>
    </View>
  );
;

const styles = StyleSheet.create(
  container:
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  ,
  text:
    fontSize: 24,
    fontWeight: 'bold',
  ,
);

export default App;

You could revamp and improve on the above code block better by applying the container and presentational components design pattern.

Here is the output of both the React Native CLI and Expo CLI apps:

Setting a Custom Font as the Default Font for Your Expo App

You may want to use a custom font as the default font for your entire React Native app rather than applying it to each Text component individually. To do this, you can use the Text component’s defaultProps to set the default font family for all Text components in your app.

Use the Text.defaultProps property to set the fontFamily property to your custom font’s name.

Here’s an example:

 import React,  useEffect  from 'react';
import Text from 'react-native';
import * as Font from 'expo-font';

const App = () =>
  useEffect(() =>
    async function loadFont()
      await Font.loadAsync(
        'custom-font': require('./assets/fonts/CustomFont.ttf'),
      );

      Text.defaultProps.style.fontFamily = 'custom-font';
    

    loadFont();
  , []);

  return (
    <Text>Hello, world!</Text>
  );
;

export default App;

Setting the default font family using Text.defaultProps will only affect Text components that are created after the default is set. If you have already created Text components before setting the default font family, you will need to set the fontFamily property on those components individually.

Creating a Custom Font Family With Multiple Font Styles

To create a custom font family with multiple font styles in a React Native CLI-generated app, you will first need to import the font files into your project. Then create a custom font family object that maps font weights and styles to their corresponding font file paths.

For example:

 import  Text  from 'react-native';
import CustomFonts from '../config/Fonts';

const App = () =>
  const CustomFonts =
    'CustomFont-Regular': require('../fonts/CustomFont-Regular.ttf'),
    'CustomFont-Bold': require('../fonts/CustomFont-Bold.ttf'),
    'CustomFont-Italic': require('../fonts/CustomFont-Italic.ttf'),
  ;

  async componentDidMount()
    await Font.loadAsync(CustomFonts);
  

return(
    <Text style=styles.text>
      Hello, world!
    </Text>
  );
;

const styles = StyleSheet.create(
  text:
    fontFamily: 'CustomFont-Regular',
    fontStyle: 'italic',
    fontWeight: 'bold',
    fontSize: 20,
  ,
);

export default App;

Note that the font file paths and names in this example are just placeholders, and you will need to replace them with your actual font file paths and names. Additionally, you must ensure that your custom font files are correctly imported into your project and that their paths match those defined in your font family object.

Final Thoughts on Custom Fonts in React Native

Custom fonts can add a unique and personalized touch to your React Native app. In this article, we have discussed how to use custom fonts in React Native, including importing font files, setting a custom font as the default font for the entire app, creating a custom font family with multiple font styles, and loading custom fonts without using Expo.

Always check the licensing restrictions of any font you use and ensure you have permission to use it in your app. It’s also important to keep in mind that loading multiple custom fonts can increase the size of your app, so you should only include the fonts that you actually need.

link