Custom Fonts in React Native Expo | Tutorial

In this video, I teach you how to use custom fonts in a React Native Expo app. We create a project with Expo CLI, download fonts from Google Fonts, add them locally, and load them with expo-font and fontFamily on Text components.

I also cover waiting for fonts to load before rendering and using expo-splash-screen to avoid a blank screen. Plus tips on not overloading the app with too many font files.

What's inside

• Creating a new project with Expo CLI
• Downloading fonts from Google Fonts and adding them to the project
• Installing and using expo-font to load fonts
• Applying custom fonts with fontFamily
• Handling font loading state to prevent errors
• Using Expo Splash Screen to prevent a blank screen
• useEffect and useCallback to control the splash screen
• Recommendations for limiting custom fonts

Creating a new project with Expo CLI

Start with npx create-expo-app fonts for a clean, up-to-date Expo structure. Open in Visual Studio Code to follow along.

A fresh project avoids conflicts and makes custom font loading easier from scratch.

Downloading fonts from Google Fonts and adding them to the project

Download .ttf or .otf files from Google Fonts. Select a font, add styles like regular and bold, and download the ZIP.

Create assets/fonts and drop the files there for local references without network dependency.

Installing and using expo-font to load fonts

Install with npx expo install expo-font. Use the useFonts hook to load fonts asynchronously:

const [fontsLoaded] = useFonts({
 Ultra: require('./assets/fonts/Ultra-Regular.ttf'),
});

The hook returns a boolean when fonts are ready, which controls when UI renders.

Applying custom fonts with fontFamily

After fonts load, set fontFamily on Text styles:

<Text style={{ fontFamily: 'Ultra', fontSize: 40 }}>Code with Beto</Text>

The fontFamily name must match the key passed to useFonts.

Handling font loading state to prevent errors

Rendering before fonts load can error or fall back to system fonts. Return null while loading:

if (!fontsLoaded) {
 return null;
}

That prevents unstyled text flashes and runtime issues.

Using Expo Splash Screen to prevent a blank screen

Font loading can briefly show a blank screen in production. expo-splash-screen keeps the splash visible until fonts are ready.

Install with npx expo install expo-splash-screen and prevent auto-hide until loading completes.

useEffect and useCallback to control the splash screen

useEffect calls an async function to prevent splash hide on mount. useCallback hides the splash once fontsLoaded is true.

The splash stays up during load and dismisses when UI is ready, avoiding blank frames.

Recommendations for limiting custom fonts

Avoid loading many custom fonts. Each file adds weight and can slow startup and increase memory use.

Pick a small set of fonts to keep the app fast and lightweight.

Resources

CourseReact Native course

React Native and Expo fundamentals including fonts and styling.

Premium resourcePro membership

Exclusive content, projects, and support to level up your apps.