Loading Custom Fonts in a React Native App (with Expo)

This post is inspired by the ReactNative course – React Native – The Practical Guide [2025]

Custom fonts can instantly elevate your app’s visual design and brand identity. In React Native (especially with Expo), loading custom fonts is simple, you just need to install the right packages and load them before your UI renders.

Let’s walk through it step-by-step.

Step 1: Install Required Packages

Run the following commands in your Expo project:

npm install expo-font
npm install expo-app-loading

expo-font: lets you load fonts from your assets folder.
expo-app-loading: helps you keep the splash screen visible while fonts are loading (so your app doesn’t flash unstyled text).

Step 2: Add Your Font Files

Create a folder inside your project (commonly assets/fonts/) and place your .ttf or .otf files there.

Example:

assets/
 └── fonts/
      ├── OpenSans-Regular.ttf
      └── OpenSans-Bold.ttf

Step 3: Load Fonts in Your App

Use the useFonts hook from expo-font and wrap your app content so it only renders after fonts are ready.

App.js

import React from 'react';
import { Text, View, StyleSheet } from 'react-native';
import AppLoading from 'expo-app-loading';
import { useFonts } from 'expo-font';

export default function App() {
  const [fontsLoaded] = useFonts({
    'open-sans': require('./assets/fonts/OpenSans-Regular.ttf'),
    'open-sans-bold': require('./assets/fonts/OpenSans-Bold.ttf'),
  });

  if (!fontsLoaded) {
    return <AppLoading />;
  }

  return (
    <View style={styles.container}>
      <Text style={styles.title}>Custom Fonts Loaded!!</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  title: {
    fontFamily: 'open-sans-bold',
    fontSize: 22,
  },
});

When the fonts finish loading, AppLoading disappears and your UI renders using the new typefaces.

Step 4 (Optional): Reuse Fonts Across Screens

If you’re using a multi-screen setup (e.g., with React Navigation), consider creating a custom hook or loading fonts in your root layout (like _layout.js in Expo Router or App.js otherwise) so all screens can access them.

Summary

• Install: expo-font and expo-app-loading
• Add font files in assets/fonts/
• Load fonts using useFonts
• Render app only after fonts are loaded

This approach ensures your UI always looks polished, no fallback fonts or layout jumps.