FontFace

The FontFace() constructor creates a new FontFace object.

Syntax

var fontFace = 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 have the following keys:

• family: Family
• style: Style
• weight: Weight
• stretch: Stretch
• unicodeRange: Unicode range
• variant: variant
• featureSettings: Feature settings

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

Browser compatibility

See also