use-font-face-observer
TypeScript icon, indicating that this package has built-in type declarations

1.2.2 • Public • Published

CI

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`,
  },
]);
  1. Detect when multiple font faces are loaded:
const isFontListLoaded = useFontFaceObserver([
  { family: `Roboto` },
  { family: `Inter` },
]);
  1. 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,
  },
)

Package Sidebar

Install

npm i use-font-face-observer

Weekly Downloads

9,235

Version

1.2.2

License

MIT

Unpacked Size

18.9 kB

Total Files

11

Last publish

Collaborators

  • iamskok