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-screen Code language: JavaScript (javascript)

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,
  }
});Code language: JavaScript (javascript)

How it works.

First, show the splash screen:

SplashScreen.preventAutoHideAsync();Code language: JavaScript (javascript)

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

const [fontLoaded, error] = useFonts({
  Inter_400Regular,
  Inter_700Bold,
  Inter_300Light
});Code language: JavaScript (javascript)

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]);Code language: JavaScript (javascript)

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,
  }
});Code language: JavaScript (javascript)

Finally, use the text style for the Text component:

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

Summary

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