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