Font Face Observer

You can install Font Face Observer via npm as a dependency. If you are not using a package manager, you can include fontfaceobserver.js or fontfaceobserver.standalone.js directly in your project. Note that fontfaceobserver.js includes a small Promise polyfill, while fontfaceobserver.standalone.js requires you to provide your own Promise polyfill for browsers that do not support them.

$ npm install fontfaceobserver

To prevent layout shifts or to apply specific styles only when a font is ready, you can use the load() promise to add a CSS class to the document element.

var font = new FontFaceObserver('My Family');

font.load().then(function () {
  document.documentElement.className += " fonts-loaded";
});

.fonts-loaded {
  body {
    font-family: My Family, sans-serif;
  }
}

You can load multiple fonts by creating separate FontFaceObserver instances for each and using Promise.all() to wait for all of them to complete.

var fontA = new FontFaceObserver('Family A');
var fontB = new FontFaceObserver('Family B');

Promise.all([fontA.load(), fontB.load()]).then(function () {
  console.log('Family A & B have loaded');
});

Call the load() method to start monitoring the font. It returns a Promise that resolves when the font is loaded and rejects when it fails to load.

load() accepts two optional parameters:

1. testString (string): A custom string to test if the font is loaded. This is required if your font does not contain the default Latin characters (BESbwy).
2. timeout (number): The timeout in milliseconds before giving up on the font load. The default is 3000ms (3 seconds).

var font = new FontFaceObserver('My Family');

// Using a custom test string
font.load('中国').then(function () {
  console.log('Font is available');
});

// Using a custom timeout (5000ms)
font.load(null, 5000).then(function () {
  console.log('Font is available');
});

To monitor a font, create a new instance of FontFaceObserver. The constructor accepts two arguments:

1. font-family (required): The name of the font family.
2. variation (optional): An object describing the font variation. It can contain weight, style, and stretch properties. If a property is omitted, it defaults to normal.

var font = new FontFaceObserver('My Family', {
  weight: 400
});

When instantiating FontFaceObserver, you can provide an options object to specify the font's characteristics.

Constructor Parameters:

• family (String): The name of the font family to observe.
• options (Object): An object containing:
  • style (String): The font style (e.g., 'normal', 'italic'). Defaults to 'normal'.
  • weight (String): The font weight (e.g., 'normal', 'bold', '400'). Defaults to 'normal'.
  • stretch (String): The font stretch (e.g., 'normal'). Defaults to 'normal'.

load() Method Parameters:

• sampleText (String): An optional string used to test font loading. Defaults to 'BESbswy'.
• timeout (Number): The maximum time to wait for the font to load in milliseconds. Defaults to 3000 (3 seconds).