Thefonts property of theDocument interface returns theFontFaceSet interface of the document.

This feature is part of theCSS Font Loading API.

Value

The returned value is theFontFaceSet interface of the document.TheFontFaceSet interface is useful for loading new fonts, checking the status of previously loaded fonts etc.

Examples

Doing operation after fonts are loaded

document.fonts.ready.then((fontFaceSet) => {  // Any operation that needs to be done only after all used fonts  // have finished loading can go here.  const fontFaces = [...fontFaceSet];  console.log(fontFaces);  // some fonts may still be unloaded if they aren't used on the site  console.log(fontFaces.map((f) => f.status));});

The promise fulfils when loading and layout operations of all used fonts are done. The set of used fonts can be different from the set ofdeclared fonts, e.g., if optional fonts (i.e., fonts declared viafont-display: optional) were not able to load in time.

Specifications

Browser compatibility

See also

• FontFaceSet interface
• FontFace