v151 · web platform · fonts
Live Font Loader
document.fonts is a FontFaceSet — the interface whose object this change exposes on the global. Here you can exercise that live API: query check(), await ready, iterate the set, and dynamically load a new FontFace and add() it. A banner confirms document.fonts instanceof FontFaceSet using the now-nameable type.
check() playground
—
The quick brown fox jumps over the lazy dog. 0123456789
load a web font at runtime
not loaded
Fetches a real Roboto woff2 from Google Fonts. If the network is unavailable the demo says so honestly rather than pretending the font loaded.
fonts currently in the set
—
| family | style | weight | status |
|---|---|---|---|
| press “Refresh” | |||
the FontFaceSet API
// document.fonts is a FontFaceSet (now a nameable type)
console.assert(document.fonts instanceof FontFaceSet);
// Synchronous availability check
document.fonts.check("bold 32px system-ui"); // true / false
// Wait until all pending fonts have settled
await document.fonts.ready;
// Load a font on demand and register it
const face = new FontFace("Roboto", "url(roboto.woff2)");
await face.load();
document.fonts.add(face);
// Iterate — FontFaceSet is a set-like object
for (const f of document.fonts) console.log(f.family, f.status);