This documentation is available as Markdown for AI agents and LLMs. See the full Markdown index or append .md to any documentation URL.

This is documentation for the next SDK version. For up-to-date documentation, see the latest version (SDK 57).

expo-font allows loading fonts from the web and using them in React Native components. See more detailed usage information in the Fonts guide.

Installation

If you are installing this in an existing React Native app, make sure to install expo in your project.

Configuration in app config

There are two ways to add fonts to your app: using the expo-font config plugin (recommended for Android and iOS) or loading them at runtime (which works across all platforms including web).

On Android and iOS, the plugin allows you to embed font files at build time which is more efficient than useFonts or loadAsync. After you set up the config plugin and run prebuild, you can render custom fonts right away. The plugin can be configured in different ways, see the Fonts guide on how to use it.

Example app.json with config plugin

{
  "expo": {
    "plugins": [
      [
        "expo-font",
        {
          "fonts": ["./path/to/file.ttf"],
          "android": {
            "fonts": [
              {
                "fontFamily": "Source Serif 4",
                "fontDefinitions": [
                  {
                    "path": "./path/to/SourceSerif4-ExtraBold.ttf",
                    "weight": 800
                  }
                ]
              },
              {
                "fontFamily": "Roboto Flex",
                "path": "./path/to/RobotoFlex.ttf",
                "fontDefinitions": [
                  { "weight": 400 },
                  { "weight": 700 },
                  { "weight": 400, "style": "italic", "axes": { "slnt": -10 } }
                ]
              }
            ]
          },
          "ios": {
            "fonts": ["./path/to/SourceSerif4-ExtraBold.ttf"]
          }
        }
      ]
    ]
  }
}

Configurable properties

Usage

If you don't want to use the config plugin, you can load a font at runtime with the useFonts hook, as shown in the snippet:

import { useFonts } from 'expo-font';
import * as SplashScreen from 'expo-splash-screen';
import { useEffect } from 'react';
import { Text, View, StyleSheet } from 'react-native';

SplashScreen.preventAutoHideAsync();

export default function App() {
  // Use `useFonts` only if you can't use the config plugin.
  const [loaded, error] = useFonts({
    'Inter-Black': require('./assets/fonts/Inter-Black.otf'),
  });

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

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

  return (
    <View style={styles.container}>
      <Text style={{ fontFamily: 'Inter-Black', fontSize: 30 }}>Inter Black</Text>
      <Text style={{ fontSize: 30 }}>Platform Default</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});

Variable fonts

The Roboto Flex entry in the example above is a variable font: one file that holds many faces. You select a face with the fontWeight and fontStyle style props. Variable fonts also work with useFonts. To learn more, see Variable fonts in the Fonts guide.

Multiple weights and styles

A font family can also hold several static font files, for example regular, bold, and italic cuts. To load them under a single fontFamily name, pass useFonts or loadAsync an array of FontFamilyDefinitions instead of a map. Then select a face with the fontWeight and fontStyle style props. To learn more, see Loading multiple weights and styles for one font family in the Fonts guide.

API

import * as Font from 'expo-font';

No API data file found, sorry!

Error codes