v150 · Fonts · Web APIs · demo

FontFaceSet Migration

Chrome 150 removes [LegacyNoInterfaceObject] from FontFaceSet's IDL, making it constructible: new FontFaceSet([]) now works. Explore the before/after patterns, Worker font loading, and the full interface.

Live probe

typeof FontFaceSet—

FontFaceSet constructible (new FontFaceSet([]))—

document.fonts instanceof FontFaceSet—

FontFaceSet.prototype.add—

FontFaceSet.prototype.load—

FontFaceSet.prototype.ready—

FontFaceSet.prototype.forEach—

Before / After

Before Chrome 150 — only document.fonts

FontFaceSet had [LegacyNoInterfaceObject] in its IDL — it was never exposed as a global constructor. You could only reach a FontFaceSet via document.fonts.

// Only way to get a FontFaceSet:
const set = document.fonts;

// Add a font to the document's set
const face = new FontFace(
  "MyFont",
  "url(font.woff2)"
);
document.fonts.add(face);
await document.fonts.load("1em MyFont");

// FAILS before Chrome 150:
// new FontFaceSet([face]); // TypeError
// typeof FontFaceSet === 'undefined'

Chrome 150+ — FontFaceSet constructible

[LegacyNoInterfaceObject] is removed. FontFaceSet is now a real constructible interface exposed as a global.

// Chrome 150+: create standalone sets
const face = new FontFace(
  "MyFont",
  "url(font.woff2)"
);

// Construct your own FontFaceSet!
const mySet = new FontFaceSet([face]);

// Load and use independently
await mySet.load("1em MyFont");

// Works in Workers too (see below)
// typeof FontFaceSet === 'function' ✓

Live demo — FontFaceSet constructor

Pattern:

The quick brown fox jumps over the lazy dog.

No custom font loaded yet.

Output will appear here…

Interface comparison

Member	Type	Before Chrome 150	Chrome 150+
FontFaceSet global	constructor	undefined (LegacyNoInterfaceObject)	function FontFaceSet()
new FontFaceSet(iterable)	constructor call	TypeError	Returns FontFaceSet instance
.add(font)	method	document.fonts.add() only	any FontFaceSet instance
.delete(font)	method	document.fonts.delete() only	any FontFaceSet instance
.clear()	method	document.fonts.clear() only	any FontFaceSet instance
.has(font)	method	document.fonts.has() only	any FontFaceSet instance
.load(font, text)	method → Promise	document.fonts.load() only	any FontFaceSet instance
.ready	Promise property	document.fonts.ready only	any FontFaceSet instance
in Workers	availability	Not available	Available via WorkerGlobalScope.fonts

Worker font loading use case

With FontFaceSet constructible, a Worker can now create and manage its own font sets — useful for OffscreenCanvas rendering or server-side text metric computation.

Press the button to run…

// worker.js
const face = new FontFace(
  "WorkerFont", "url(font.woff2)"
);
const ffs = new FontFaceSet([face]);
await ffs.ready;

// Measure text without DOM access
const canvas = new OffscreenCanvas(800, 200);
const ctx = canvas.getContext("2d");
ctx.font = "24px WorkerFont";
const metrics = ctx.measureText("Hello");

implementation reference

Need the exact API surface, compatibility boundaries, errors, lifecycle, and source links? Read the matching gendn reference ↗