TheFontFace interface of theCSS Font Loading API represents a single usable font face.

This interface defines the source of a font face, either a URL to an external resource or a buffer, and font properties such asstyle,weight, and so on.For URL font sources it allows authors to trigger when the remote font is fetched and loaded, and to track loading status.

Constructor

FontFace()

Constructs and returns a newFontFace object, built from an external resource described by a URL or from anArrayBuffer.

Instance properties

FontFace.ascentOverride

A string that retrieves or sets theascent metric of the font. It is equivalent to theascent-override descriptor.

FontFace.descentOverride

A string that retrieves or sets thedescent metric of the font. It is equivalent to thedescent-override descriptor.

FontFace.display

A string that determines how a font face is displayed based on whether and when it is downloaded and ready to use.

FontFace.family

A string that retrieves or sets thefamily of the font. It is equivalent to thefont-family descriptor.

FontFace.featureSettings

A string that retrieves or sets infrequently used font features that are not available from a font's variant properties. It is equivalent to the CSSfont-feature-settings property.

FontFace.lineGapOverride

A string that retrieves or sets theline-gap metric of the font. It is equivalent to theline-gap-override descriptor.

FontFace.loadedRead only

Returns aPromise that resolves with the currentFontFace object when the font specified in the object's constructor is done loading or rejects with aSyntaxErrorDOMException.

FontFace.statusRead only

Returns an enumerated value indicating the status of the font, one of"unloaded","loading","loaded", or"error".

FontFace.stretch

A string that retrieves or sets how the fontstretches. It is equivalent to thefont-stretch descriptor.

FontFace.style

A string that retrieves or sets thestyle of the font. It is equivalent to thefont-style descriptor.

FontFace.unicodeRange

A string that retrieves or sets therange of unicode code points encompassing the font. It is equivalent to theunicode-range descriptor.

FontFace.variantNon-standard

A string that retrieves or sets thevariant of the font.

FontFace.variationSettings

A string that retrieves or sets thevariation settings of the font. It is equivalent to thefont-variation-settings descriptor.

FontFace.weight

A string that contains theweight of the font. It is equivalent to thefont-weight descriptor.

FontFace.load()

Loads a font based on current object's constructor-passed requirements, including a location or source buffer, and returns aPromise that resolves with the current FontFace object.

Examples

The code below defines a font face using data at the URL "my-font.woff" with a few font descriptors.Just to show how it works, we then define thestretch descriptor using a property.

// Define a FontFaceconst font = new FontFace("my-font", 'url("my-font.woff")', {  style: "italic",  weight: "400",});font.stretch = "condensed";

Next we load the font usingFontFace.load() and use the returned promise to track completion or report an error.

// Load the fontfont.load().then(  () => {    // Resolved - add font to document.fonts  },  (err) => {    console.error(err);  },);

To actuallyuse the font we will need to add it to aFontFaceSet.We could do that before or after loading the font.

For additional examples seeCSS Font Loading API > Examples.

Specifications

Browser compatibility

See also

• @font-face