expo-font

What is expo-font?

The expo-font package is a part of the Expo ecosystem and provides utilities for loading and using custom fonts in React Native applications. It simplifies the process of integrating custom fonts, ensuring they are loaded before the app renders.

What are expo-font's main functionalities?

Loading Custom Fonts

This feature allows you to load custom fonts asynchronously before the app renders. The AppLoading component is used to display a loading screen until the fonts are fully loaded.

import * as Font from 'expo-font';
import { AppLoading } from 'expo';
import React, { useState } from 'react';
import { Text, View } from 'react-native';

const loadFonts = () => {
  return Font.loadAsync({
    'custom-font': require('./assets/fonts/CustomFont.ttf'),
  });
};

export default function App() {
  const [fontsLoaded, setFontsLoaded] = useState(false);

  if (!fontsLoaded) {
    return (
      <AppLoading
        startAsync={loadFonts}
        onFinish={() => setFontsLoaded(true)}
        onError={console.warn}
      />
    );
  }

  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text style={{ fontFamily: 'custom-font', fontSize: 20 }}>Hello, world!</Text>
    </View>
  );
}

Using Loaded Fonts

Once the fonts are loaded, you can use them in your components by specifying the fontFamily style property.

import React from 'react';
import { Text, View } from 'react-native';

export default function App() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text style={{ fontFamily: 'custom-font', fontSize: 20 }}>Hello, world!</Text>
    </View>
  );
}

Other packages similar to expo-font

react-native-fonts

react-native-fonts is a package that provides similar functionality for loading and using custom fonts in React Native applications. It offers a straightforward API for font management but lacks the tight integration with the Expo ecosystem that expo-font provides.

react-native-custom-fonts

react-native-custom-fonts is another package for managing custom fonts in React Native. It offers a more manual approach compared to expo-font, requiring additional setup steps and configuration.

README

expo-font

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

See Font docs for documentation of this universal module's API.