sewonist / use-font-face-observer

React hook to detect if web fonts are available 🪝

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 isFontListLoaded = useFontFaceObserver([
  {
    family: `Roboto`,
    style: `italic`,
    weight: `bold`,
    stretch: `condensed`,
  },
]);

2. Detect when multiple font faces are loaded:

const isFontListLoaded = useFontFaceObserver([
  { family: `Roboto` },
  { family: `Inter` },
]);

3. Extra options:

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

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