The fonts
property of the Document
interface returns the FontFaceSet
interface of the document.
This feature is part of the CSS Font Loading API.
The fonts
property of the Document
interface returns the FontFaceSet
interface of the document.
This feature is part of the CSS Font Loading API.
The returned value is the FontFaceSet
interface of the document. The FontFaceSet
interface is useful for loading new fonts, checking the status of previously loaded fonts etc.
js
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 of declared fonts, e.g. if optional fonts (i.e. fonts declared via font-display: optional
) were not able to load in time.
Specification |
---|
CSS Font Loading Module Level 3 # FontFaceSet-interface |
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet | |
fonts |
35 | 79 | 41 | No | 22 | 10 | 37 | 35 | 41 | 22 | 10 | 3.0 |
FontFaceSet
interfaceFontFace
© 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/Document/fonts