FontObserver React Hook (to prevent FOUC)

example.tsx

import { useState, useEffect } from 'react'
import FontFaceObserver from 'fontfaceobserver'

export default function useFonts(allFonts, selectedFonts) {
  const [isVisible, setIsVisible] = useState(false)

  useEffect(() => {
    const fonts = selectedFonts.length
      ? selectedFonts.map(name => allFonts[name])
      : Object.values(allFonts)
    Promise.all(fonts.map(([_, testString, fontName]) => {
      const font = new FontFaceObserver(fontName)
      return font.load(testString, 30000)
    }))
      .then(() => setIsVisible(true))
  }, [selectedFonts.join(':')])

  return isVisible
}

// then elsewhere:
export default {
  'latin': ['/font/screen/latin.otf', 'IEAOU', 'Latin'],
}