React Native Custom Fonts

Summary: in this tutorial, you will learn how to load custom fonts to React Native apps.

Setting up packages #

Step 1. Open your terminal and navigate to your React Native directory

Step 2. Run this command to install the expo-font, @expo-google-fonts/inter, and expo-splash-screen packages:

npx expo install expo-font @expo-google-fonts/inter expo-splash-screenCopy

Here are the packages:

• expo-font – allows you to load custom fonts.
• expo-splash-screen – manages the visibility of the native splash screen.
• @expo-google-fonts/inter – loads the Inter font into your app.

Using custom fonts #

Modify the App.js to use the Inter font:

import { useEffect } from 'react';
import { StyleSheet, SafeAreaView, Text } from 'react-native';
import { Inter_700Bold, Inter_400Regular, Inter_300Light, useFonts } from '@expo-google-fonts/inter';
import * as SplashScreen from 'expo-splash-screen';

SplashScreen.preventAutoHideAsync();

export default function App() {

  const [fontLoaded, error] = useFonts({
    Inter_400Regular,
    Inter_700Bold,
    Inter_300Light
  });

  useEffect(() => {
    if (fontLoaded || error) {
      SplashScreen.hideAsync();
    }
  }, [fontLoaded, error]);


  if (!fontLoaded && !error) {
    return null;
  }


  return (
    <SafeAreaView style={styles.container}>
      <Text style={styles.text}>Hello, World!</Text>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  text: {
    fontFamily: 'Inter_400Regular',
    fontSize: 40,
  }
});Copy

How it works.

First, show the splash screen:

SplashScreen.preventAutoHideAsync();Copy

Second, load the Inter font family asynchronously using the useFonts hook:

const [fontLoaded, error] = useFonts({
  Inter_400Regular,
  Inter_700Bold,
  Inter_300Light
});Copy

The useFonts hook returns an array of two values:

• fontLoaded: true if the font has finished loading or false otherwise.
• error: true if an error is encountered when loading the fonts or null otherwise.

Third, hide the splash screen if the font is loaded or an error occurred:

useEffect(() => {
  if (fontLoaded || error) {
    SplashScreen.hideAsync();
  }
}, [fontLoaded, error]);Copy

Fourth, define a text style that uses the Inter_300Light font:

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  text: {
    fontFamily: 'Inter_300Light',
    fontSize: 40,
  }
});Copy

Finally, use the text style for the Text component:

return (
    <SafeAreaView style={styles.container}>
        <Text style={styles.text}>Hello, World!</Text>
    </SafeAreaView>
);Copy

Summary #

• Use the useFonts hook to load custom fonts for your app.