Loading a Font

Loading a Font

The CSS Font Loading API is the script side of @font-face (@font-face) and is Baseline widely available. new FontFace(family, source) describes a font, load() returns a promise, document.fonts.add() registers it, document.fonts.check() tests availability and document.fonts.ready resolves when pending fonts finish.

Loading a web font on demandHTMLLive

<p id="quote" style="font-size:30px;margin:0">The quick brown fox</p>
<pre id="out" style="margin:0"></pre>
<script>
  const font = new FontFace('Lobster',
    'url(https://fonts.gstatic.com/s/lobster/v32/neILzCirqoswsqX9zoKmMw.woff2)');
  font.load().then((loaded) => {
    document.fonts.add(loaded);
    document.querySelector('#quote').style.fontFamily = 'Lobster, cursive';
    document.querySelector('#out').textContent =
      `status: ${loaded.status}, check(): ${document.fonts.check('30px Lobster')}`;
  });
</script>

Browser output of Listing 8.30 — Browser output of 30

Load a font from script when only some views need it, such as a signature pad, so first paint never waits. Await document.fonts.ready before measuring text, because a late font swap changes widths.

MENU