Web/API/FontFace/FontFace

Draft This page is not complete.

This is an experimental technologyCheck the Browser compatibility table carefully before using this in production.

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

Specification	Status	Comment
CSS Font Loading Module Level 3The definition of 'FontFace Constructor' in that specification.	Working Draft	Initial definition

Browser compatibility

Update compatibility data on GitHub

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
`FontFace()` constructor	Chrome Full support 35	Edge Full support 79	Firefox Full support 41	IE No support No	Opera Full support 22	Safari Full support 10	WebView Android Full support 37	Chrome Android Full support 35	Firefox Android Full support 41	Opera Android Full support 22	Safari iOS Full support 10	Samsung Internet Android Full support 4.0

Legend

Full support: Full support
No support: No support