use-fonts-loaded.ts

import {useLayoutEffect, useState} from 'react';

const fontFaces = [
    ['tangerine', new FontFace('"Tangerine", serif', 'url(https://fonts.googleapis.com/css?family=Tangerine)')]
] as const;

export function useFontsLoaded(types = ['tangerine']) {
    const [fontsLoaded, setFontsLoaded] = useState(false);
    const depTypes = types.join(' ');

    useLayoutEffect(() => {
        const typesList = depTypes.split(' ');
        Promise.all(
            fontFaces.map(([type, fontFace]) => {
                if (typesList.includes(type)) {
                    return fontFace.load();
                }
                return Promise.resolve();
            })
        )
            .then(() => {
                setFontsLoaded(true);
            })
            .catch((e) => {
                console.error('Fonts Loaded Hook: error loading one or more fonts.', e);
            });
    }, [depTypes]);

    return fontsLoaded;
}