Font Face Observer React Hook 🪝

Font Face Observer is a small @font-face loader and monitor compatible with any webfont service. It will monitor when a webfont is loaded and notify you. It does not limit you in any way in the where, when, or how you load your webfonts. Unlike the Web Font Loader Font Face Observer uses scroll events to detect font loads efficiently and with minimum overhead.

Installation

yarn add use-font-face-observer

Usage Examples

1. Detect when a single font face is loaded (condensed, italic, and bold Roboto):

const fontIsLoaded = useFontFaceObserver([
  {
    font: `Roboto`,
    style: `italic`,
    weight: `bold`,
    stretch: `condensed`
  }
])

2. Detect when multiple font faces are loaded:

const fontsAreLoaded = useFontFaceObserver([
  { font: `Roboto` },
  { font: `Inter` },
])

3. Extra options:

• When your font doesn't contain at least the Latin "BESbwy" characters you must pass a custom test string.
• Wait for 5000ms (defaults to 3000ms)
• Show console errors (defaults to false)

const fontsAreLoaded = useFontFaceObserver(
  [{ font: `Roboto` }],
  {
    testString?: `ФЯЦ`
    timeout: 5000,
  },
  {
    showErrors: true,
  },
)