FontFace()

The FontFace() constructor creates a new FontFace object.

Syntax

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

Parameters

family

Specifies a name that will be used as the font face value for font properties. Takes the same type of values as the font-family descriptor of @font-face .

source

The font source. This can be either:

  • A URL
  • Binary font data
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 @font-face/ascent-override.

descentOverride

With an allowable value for @font-face/descent-override.

featureSettings

With an allowable value for @font-face/font-feature-settings.

lineGapOverride

With an allowable value for @font-face/line-gap-override.

stretch

With an allowable value for @font-face/font-stretch.

style

With an allowable value for @font-face/font-style.

unicodeRange

With an allowable value for @font-face/unicode-range.

variant

With an allowable value for @font-face/font-variant.

variationSettings

With an allowable value for @font-face/font-variation-settings.

weight

With an allowable value for @font-face/font-weight.

Example

async function loadFonts() {
    const font = new FontFace('myfont', 'url(myfont.woff)');
    // 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');
}

Specifications

Specification
CSS Font Loading Module Level 3 (CSS Font Loading 3)
# font-face-constructor

Browser compatibility

BCD tables only load in the browser

See also