CSS Font Loading API

CSS stylesheets allow authors to use custom fonts; specifying fonts to download using the @font-face rule, and applying them to elements with the font-family property. The point at which a font is downloaded is controlled by the user agent. Most agents only fetch and load fonts when they are first needed, which can result in a perceptible delay.

The CSS Font Loading API overcomes this problem by letting authors control and track when a font face is fetched and loaded, and when it is added to the font face set owned by the document or worker. Adding a font face to the document or worker font face set allows the user agent to fetch and load the associated font resource automatically if needed. A font face can be loaded either before or after it is added to a font face set, but it must be added to the set before it can be used for drawing.

Font faces are defined in FontFace objects, which specify a binary or URL font source and other properties of font in much the same way as the CSS @font-face rule. FontFace objects are added to the document or worker FontFaceSet using Document.fonts and WorkerGlobalScope.fonts, respectively. Authors can trigger download of fonts using either FontFace or FontFaceSet, and monitor loading completion. FontFaceSet can additionally be used to determine when all fonts required by a page have loaded and the document layout is complete.

The FontFace.status property indicates the font face loading status: unloaded, loading, loaded or failed. This status is initially unloaded. It is set to loading when the file is being downloaded or the font data is being processed, and to failed if the font definition is invalid or the font data cannot be loaded. The status is set to loaded when the font face data has been successfully fetched (if needed) and loaded.

Font faces are created using the FontFace constructor, which takes as parameters: the font family, the font source, and optional descriptors. The format and grammar of these arguments is the same as the equivalent @font-face definition.

The font source can either be binary data in an ArrayBuffer or a font resource at a URL. A typical font face definition using a URL source might be as shown below. Note that the url() function is required for URL font sources.

const font = new FontFace("myfont", "url(myfont.woff)", {
  style: "italic",
  weight: "400",
  stretch: "condensed",
});

Font faces with a binary source are automatically loaded if the font definition is valid and the font data can be loaded — FontFace.status is set to loaded on success and failed otherwise. Font faces with a URL source are validated but not automatically loaded — FontFace.status is set unloaded if the font face definition is valid and failed otherwise.

Font faces are usually added to the document or worker FontFaceSet to allow the user agent to automatically load the font when needed, and must be added in order for the font to be used for rendering text.

The code below shows a font face being added to the document.

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

// Add to the document.fonts (FontFaceSet)
document.fonts.add(font);

A font face can be loaded manually by calling FontFace.load(), or by calling FontFaceSet.load() if the font face has been added to the FontFaceSet. Note that attempting to load an already-loaded font has no effect.

The code below shows how to define a font face, add it to the document fonts, and then initiate a font load.

// Define a FontFace
const font = new FontFace("myfont", "url(myfont.woff)");

// Add to the document.fonts (FontFaceSet)
document.fonts.add(font);

// Load the font
font.load();

// Wait until the fonts are all loaded
document.fonts.ready.then(() => {
  // Use the font to render text (for example, in a canvas)
});

Note that the font.load() returns a promise, so we could have handled the completion of font loading by chaining then afterwards. Using document.fonts.ready can be better in some circumstances, as it is only called when all fonts in the document have been resolved and layout is complete.

FontFace

Represents a single usable font face.

FontFaceSet

An interface loading font faces and checking their download statuses.

FontFaceSetLoadEvent

Fired whenever a FontFaceSet loads.

This is a very simple example that shows a font being loaded from Google Fonts and used to draw text to a canvas. The example also logs the status immediately after creation and after loading.

HTML

This code defines a canvas for drawing to and a textarea for logging.

<canvas id="js-canvas"></canvas>
<textarea id="log" rows="3" cols="100"></textarea>

JavaScript

First we get the element to which we will log, and the canvas that will be used to render text in the downloaded font.

const log = document.getElementById("log");

const canvas = document.getElementById("js-canvas");
canvas.width = 650;
canvas.height = 75;

Next we define a FontFace that has a URL source that is a Google Font and add it to document.fonts. We then log the font status, which should be unloaded.

const bitterFontFace = new FontFace(
  "FontFamily Bitter",
  "url(https://fonts.gstatic.com/s/bitter/v7/HEpP8tJXlWaYHimsnXgfCOvvDin1pK8aKteLpeZ5c0A.woff2)",
);
document.fonts.add(bitterFontFace);
log.textContent += `Bitter font: ${bitterFontFace.status}\n`; // > Bitter font: unloaded

Then we call the FontFace.load() method to load the font face, and wait on the returned promise. Once the promise resolves we log the loaded status (which should be loaded) and draw text in the loaded font to the canvas.

bitterFontFace.load().then(
  () => {
    log.textContent += `Bitter font: ${bitterFontFace.status}\n`; // > Bitter font: loaded

    const ctx = canvas.getContext("2d");
    ctx.font = '36px "FontFamily Bitter"';
    ctx.fillText("Bitter font loaded", 20, 50);
  },
  (err) => {
    console.error(err);
  },
);

Note that we could also have waited on the promise returned by the FontFace.loaded property, or on FontFaceSet.ready.

Result

The result is shown below. It should show the name of the font drawn on the canvas in the downloaded font, and a log showing the load status before and after loading.

This example is similar to the previous one, except that it uses FontFaceSet.load() to load the font. It also demonstrates how to listen for font loading events.

HTML

<canvas id="js-canvas"></canvas>
<textarea id="log" rows="25" cols="100"></textarea>

JavaScript

The code below defines a canvas context for drawing text, defines a font face, and adds it to the document font face set.

const log = document.getElementById("log");

const canvas = document.getElementById("js-canvas");
canvas.width = 650;
canvas.height = 75;
const ctx = canvas.getContext("2d");

const oxygenFontFace = new FontFace(
  "FontFamily Oxygen",
  "url(https://fonts.gstatic.com/s/oxygen/v5/qBSyz106i5ud7wkBU-FrPevvDin1pK8aKteLpeZ5c0A.woff2)",
);
document.fonts.add(oxygenFontFace);
log.textContent += `Oxygen status: ${oxygenFontFace.status}\n`;

Next we use load() on the font face set to load the font, specifying which of the fonts to load. The method returns a Promise. If the promise is resolved we use the font to draw some text. If it is rejected the error is logged.

document.fonts.load("36px FontFamily Oxygen").then(
  (fonts) => {
    log.textContent += `Bitter font: ${fonts}\n`; // > Oxygen font: loaded
    log.textContent += `Bitter font: ${oxygenFontFace.status}\n`; // > Oxygen font: loaded
    ctx.font = '36px "FontFamily Oxygen"';
    ctx.fillText("Oxygen font loaded", 20, 50);
  },
  (err) => {
    console.error(err);
  },
);

Instead of waiting on a promise we might instead use events to track the font loading operation. The code below listens for the loading and loadingerror events and logs the number of font faces for each case. In the loadingdone event listener we additionally iterate through the font faces and log the family names.

document.fonts.addEventListener("loading", (event) => {
  log.textContent += `loading_event: ${event.fontfaces.length}\n`;
});
document.fonts.addEventListener("loadingerror", (event) => {
  log.textContent += `loadingerror_event: ${event.fontfaces.length}\n`;
});
document.fonts.addEventListener("loadingdone", (event) => {
  log.textContent += `loadingdone_event: ${event.fontfaces.length}\n`;
  event.fontfaces.forEach((value) => {
    log.textContent += `  fontface: ${value.family}\n`;
  });
});

The last bit of code demonstrates how you can monitor the completion of font loading using the promise returned by FontFaceSet.ready. Unlike the other mechanisms this returns when all fonts defined in the document have been downloaded and layout is complete.

When the promise resolves we iterate the values in the document's font faces.

document.fonts.ready.then(function () {
  log.textContent += `\nFontFaces in document: ${document.fonts.size}.\n`;

  for (const fontFace of document.fonts.values()) {
    log.textContent += "FontFace:\n";
    for (const property in fontFace) {
      log.textContent += `  ${property}: ${fontFace[property]}\n`;
    }
  }
});

Result

The output below shows the text drawn in "Oxygen" font. This also shows logging from the events and when the promise returned by document.fonts.ready resolves.