FontFace: FontFace() constructor

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨January 2020⁩.

Note: This feature is available in Web Workers.

The FontFace() constructor creates a new FontFace object.

Syntax

new FontFace(family, source)
new FontFace(family, source, descriptors)

Parameters

family

Specifies a font family name that can be used to match against this font face when styling elements.

Takes the same type of values as the font-family descriptor of @font-face. This value may also be read and set using the FontFace.family property.

source

The font source. This can be either:

A URL to a font face file.
Binary font face data in an ArrayBuffer or a TypedArray.

descriptors Optional

A set of optional descriptors passed as an object. It can contain any of the descriptors available for @font-face:

ascentOverride: With an allowable value for ascent-override.
descentOverride: With an allowable value for descent-override.
display: With an allowable value for font-display.
featureSettings: With an allowable value for font-feature-settings.
lineGapOverride: With an allowable value for line-gap-override.
stretch: With an allowable value for font-stretch.
style: With an allowable value for font-style.
unicodeRange: With an allowable value for unicode-range.
variationSettings: With an allowable value for font-variation-settings.
weight: With an allowable value for font-weight.

Exceptions

SyntaxError DOMException: Thrown when a descriptor string does not match the grammar of the corresponding @font-face descriptor, or the specified binary source cannot be loaded. This error results in FontFace.status being set to error.

Examples

async function loadFonts() {
  const font = new FontFace("my-font", 'url("my-font.woff")', {
    style: "normal",
    weight: "400",
    stretch: "condensed",
  });
  // wait for font to be loaded
  await font.load();
  // add font to document
  document.fonts.add(font);
  // enable font with CSS class
  document.body.classList.add("fonts-loaded");
}