v150 · CSS Fonts · WebIDL

Set-like Iteration Demo

FontFaceSet is a Set-like interface — it supports forEach, values(), keys(), entries(), and size just like a native Set. Before Chrome 150, the [LegacyNoInterfaceObject] attribute hid FontFaceSet from window, making some iteration patterns hard to type-check. This demo exercises every Set-like method directly on document.fonts.

Load sample fonts into FontFaceSet

Click to add synthetic FontFace objects to document.fonts. These simulate loaded fonts so the iteration methods have something to iterate over.

// Click "Add 3 sample FontFace objects" to begin…
.size Set property
Returns the number of FontFace objects in the set.
// result
.has(font) Set method
Returns true if the specified FontFace is in the set.
// result
.forEach(cb) Set method
Calls cb(fontFace, fontFace, set) for each entry.
// result
.values() Set iterator
Returns an iterator over each FontFace object.
// result
.keys() Set iterator
Same as .values() — Sets have no separate keys.
// result
.entries() Set iterator
Yields [fontFace, fontFace] pairs (key = value for Sets).
// result
for…of Set iterable
FontFaceSet is iterable — use for (const f of document.fonts).
// result
instanceof FontFaceSet Chrome 150
Now works: window.FontFaceSet is exposed after removing [LegacyNoInterfaceObject].
// result

see also

implementation reference

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