use-fonts.md

useFonts

Load a map of fonts with Font

Other hooks   —   Usage   —   Changelog

expo install @use-expo/font expo-font

Usage

// full hook
const [isLoaded] = useFonts({ ... });

Example

import { useFonts } from '@use-expo/font';
import { AppLoading } from 'expo';
import { Text, View } from 'react-native';

const customFonts = {
    'OpenSans-Regular': require('./assets/fonts/open-sans-regular.ttf'),
};

function FontExample() {
    const [isLoaded] = useFonts(customFonts);

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

    return (
        <View>
            <Text style={{ fontFamily: 'OpenSans-Regular' }}>Custom font</Text>
        </View>
    );
}

API

import { FontSource } from 'expo-font';

function useFonts(map: FontMap): Result;

interface FontMap {
    /** All fonts, by name, to load */
    [name: string]: FontSource;
}

type Result = [
    /** If the fonts are loaded or not */
    boolean,
];

with ❤️ byCedric