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

Load fonts at runtime and use them in React Native components.

API documentation

• Documentation for the latest stable release
• Documentation for the main branch

Installation in managed Expo projects

For managed Expo projects, please follow the installation instructions in the API documentation for the latest stable release.

Installation in bare React Native projects

For bare React Native projects, you must ensure that you have installed and configured the expo package before continuing.

Add the package to your npm dependencies

npx expo install expo-font

Configure for Android

No additional set up necessary.

Configure for iOS

Run npx pod-install after installing the npm package.

Contributing

Contributions are very welcome! Please refer to guidelines described in the contributing guide.