coderef

Font loadingBaseline · Widely available

The document.fonts API dynamically loads custom fonts and tracks when fonts are loading or ready to use.

Supported in all major browsers for at least 30 months — safe to use without fallbacks. Baseline since Jan 15, 2020. Widely available since Jul 15, 2022.

How to use ↓Compare browsers

Browser support

DesktopChrome
1–34Not supported
35+Supportedsince May 20, 2014
Current: 155
Edge
12–18Not supported
79+Supportedsince Jan 15, 2020
Current: 154
Firefox
1–40Not supported
41+Supportedsince Sep 22, 2015
Current: 157
Safari
1–9.1Not supported
10+Supportedsince Sep 20, 2016
Current: 27
MobileChrome Android
18–34Not supported
35+Supportedsince May 20, 2014
Current: 155
Firefox Android
4–40Not supported
41+Supportedsince Sep 22, 2015
Current: 157
Safari iOS
1–9.3Not supported
10+Supportedsince Sep 13, 2016
Current: 27

How to use

This feature is Baseline widely available — use it freely, no fallback needed.

Example

Full syntax and examples are on MDN: fonts.

Feature detection

JS · check before using
if ("onloading" in FontFaceSet.prototype) {
  // the loading event is supported
}

Documentation (MDN)

Specification

Usage share

Sub-features

Support for each part of the feature (40). The overall table above shows when the whole feature works.

Sub-featureChromeEdgeFirefoxSafariChrome AndroidFirefox AndroidSafari iOS
Document.fonts35794110354110
FontFace35794110354110
FontFace.FontFace35794110354110
FontFace.display60795811.1605811.3
FontFace.family35794110354110
FontFace.featureSettings14014041101404110
FontFace.load35794110354110
FontFace.loaded37794110374110
FontFace.status35794110354110
FontFace.stretch35794110354110
FontFace.style35794110354110
FontFace.unicodeRange35794110354110
FontFace.variant357941✕3541✕
FontFace.variationSettings14014062✕14062✕
FontFace.weight35794110354110
FontFace.worker_support6979105156910515
FontFaceSet35794110354110
FontFaceSet.@@iterator48794110484110
FontFaceSet.add35794110354110
FontFaceSet.check12012041101204110
Show 20 more
Sub-featureChromeEdgeFirefoxSafariChrome AndroidFirefox AndroidSafari iOS
FontFaceSet.clear35794110354110
FontFaceSet.delete35794110354110
FontFaceSet.entries4879✕1048✕10
FontFaceSet.forEach35794110354110
FontFaceSet.has35794110354110
FontFaceSet.keys4879✕1048✕10
FontFaceSet.load35794110354110
FontFaceSet.loading_event35794126.2354126.2
FontFaceSet.loadingdone_event357941✕3541✕
FontFaceSet.loadingerror_event357941✕3541✕
FontFaceSet.ready35794110354110
FontFaceSet.size35794110354110
FontFaceSet.status35794110354110
FontFaceSet.values4879✕1048✕10
FontFaceSet.worker_support6979105156910515
FontFaceSetLoadEvent357941✕3541✕
FontFaceSetLoadEvent.FontFaceSetLoadEvent577941✕5741✕
FontFaceSetLoadEvent.fontfaces357941✕3541✕
FontFaceSetLoadEvent.worker_support✕✕105✕✕105✕
WorkerGlobalScope.fonts6979105156910515