Widely available Supported across all major browsers. Safe to use in production.

Font loading

The fonts property of the Document interface returns the FontFaceSet interface of the document.

This feature is part of the CSS Font Loading API.

Utilities

Browser support

Feature Desktop Mobile
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
FontFace
35
79
41
10
35
10
fonts

The fonts property of the Document interface returns the FontFaceSet interface of the document.
35
79
41
10
35
10
display

The display property of the FontFace interface determines how a font face is displayed based on whether and when it is downloaded and ready to use. This property is equivalent to the CSS font-display descriptor.
60
79
58
11.1
60
11.3
family

The FontFace.family property allows the author to get or set the font family of a FontFace object.
35
79
41
10
35
10
featureSettings

The featureSettings property of the FontFace interface retrieves or sets infrequently used font features that are not available from a font's variant properties.
140
140
41
10
140
10
FontFace

The FontFace() constructor creates a new FontFace object.
35
79
41
10
35
10
load

The load() method of the FontFace interface requests and loads a font whose source was specified as a URL. It returns a Promise that resolves with the current FontFace object.
35
79
41
10
35
10
loaded

The loaded read-only property of the FontFace interface returns a Promise that resolves with the current FontFace object when the font specified in the object's constructor is done loading or rejects with a SyntaxError.
37
79
41
10
37
10
status

The status read-only property of the FontFace interface returns an enumerated value indicating the status of the font, one of "unloaded", "loading", "loaded", or "error".
35
79
41
10
35
10
stretch

The stretch property of the FontFace interface retrieves or sets how the font stretches.
35
79
41
10
35
10
style

The style property of the FontFace interface retrieves or sets the font's style.
35
79
41
10
35
10
unicodeRange

The unicodeRange property of the FontFace interface retrieves or sets the range of unicode code points encompassing the font.
35
79
41
10
35
10
variant
Non-standard

The variant property of the FontFace interface programmatically retrieves or sets font variant values.
35
79
41
10
35
10
variationSettings

The variationSettings property of the FontFace interface retrieves or sets low-level OpenType or TrueType font variations.
140
140
62
140
weight

The weight property of the FontFace interface retrieves or sets the weight of the font.
35
79
41
10
35
10
worker_support

Available in workers
69
79
105
15
69
15
FontFaceSet

The FontFaceSet interface of the CSS Font Loading API manages the loading of font-faces and querying of their download status.
35
79
41
10
35
10
@@iterator

[Symbol.iterator]
48
79
41
10
48
10
add

The add() method of the FontFaceSet interface adds a new font to the set.
35
79
41
10
35
10
check

The check() method of the FontFaceSet returns true if you can render some text using the given font specification without attempting to use any fonts in this FontFaceSet that are not yet fully loaded. This means you can use the font specification without causing a font swap.
120
120
41
10
120
10
clear

The clear() method of the FontFaceSet interface removes all fonts added via this interface. Fonts added with the @font-face rule are not removed.
35
79
41
10
35
10
delete

The delete() method of the FontFaceSet interface removes a font from the set.
35
79
41
10
35
10
entries

The entries() method of the FontFaceSet interface returns a new Iterator object, containing an array of [value,value] for each element in the FontFaceSet.
48
79
41
10
48
10
forEach

The forEach() method of the FontFaceSet interface executes a provided function for each value in the FontFaceSet object.
35
79
41
10
35
10
has

The has() method of the FontFaceSet interface returns a Boolean asserting whether an element is present with the given value.
35
79
41
10
35
10
keys

The keys() method of the FontFaceSet interface is an alias for FontFaceSet.values.
48
79
41
10
48
10
load

The load() method of the FontFaceSet forces all the fonts given in parameters to be loaded.
35
79
41
10
35
10
loading_event

The loading event fires when the document begins loading fonts.
35
79
41
26.2
35
26.2
loadingdone_event

The loadingdone event fires when the document has loaded all fonts.
35
79
41
10
35
10
loadingerror_event

The loadingerror event fires when fonts have finished loading, but some or all fonts have failed to load.
35
79
41
10
35
10
ready

The ready read-only property of the FontFaceSet interface returns a Promise that resolves to the given FontFaceSet.
35
79
41
10
35
10
size

The size property of the FontFaceSet interface returns the number of items in the FontFaceSet.
35
79
41
10
35
10
status

The status read-only property of the FontFaceSet interface returns the loading state of the fonts in the set.
35
79
41
10
35
10
values

The values() method of the FontFaceSet interface returns a new iterator object that yields the values for each element in the FontFaceSet object in insertion order.
48
79
41
10
48
10
worker_support

Available in workers
69
79
105
15
69
15
FontFaceSetLoadEvent

The FontFaceSetLoadEvent interface of the CSS Font Loading API represents events fired at a FontFaceSet after it starts loading font faces.
35
79
41
35
fontfaces

The fontfaces read-only property of the FontFaceSetLoadEvent interface returns an array of FontFace instances, each of which represents a single usable font.
35
79
41
35
FontFaceSetLoadEvent

The FontFaceSetLoadEvent() constructor creates a new FontFaceSetLoadEvent object which is fired whenever a FontFaceSet loads.
57
79
41
57
worker_support

Available in workers
105
fonts

The fonts property of the WorkerGlobalScope interface returns the FontFaceSet interface of the worker.
69
79
105
15
69
15
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)
Notes 3 item(s)
Limitation
  • This browser only partially implements this feature
Removed
  • This feature was removed in a later browser version (140)
Implementation note
  • The property can be set, but has no effect. See bug 324519293
Notes 3 item(s)
Limitation
  • This browser only partially implements this feature
Removed
  • This feature was removed in a later browser version (140)
Implementation note
  • The property can be set, but has no effect. See bug 324519293
Notes 3 item(s)
Limitation
  • This browser only partially implements this feature
Removed
  • This feature was removed in a later browser version (140)
Implementation note
  • The property can be set, but has no effect. See bug 324519293
Notes 1 item(s)
Removed
  • This feature was removed in a later browser version (13.1)
Notes 1 item(s)
Removed
  • This feature was removed in a later browser version (13.4)
Notes 1 item(s)
Implementation note
  • Chrome does not expose the `FontFaceSet` interface directly, and is only available through `Document.fonts` or `WorkerGlobalScope.fonts`.
Notes 1 item(s)
Implementation note
  • Edge does not expose the `FontFaceSet` interface directly, and is only available through `Document.fonts` or `WorkerGlobalScope.fonts`.
Notes 1 item(s)
Implementation note
  • Chrome Android does not expose the `FontFaceSet` interface directly, and is only available through `Document.fonts` or `WorkerGlobalScope.fonts`.
Notes 3 item(s)
Limitation
  • This browser only partially implements this feature
Removed
  • This feature was removed in a later browser version (120)
Implementation note
  • Prior to version 120, this method returned `false` instead of `true` for nonexistent or locally installed fonts. See bug 40893726.
Notes 3 item(s)
Limitation
  • This browser only partially implements this feature
Removed
  • This feature was removed in a later browser version (120)
Implementation note
  • Prior to version 120, this method returned `false` instead of `true` for nonexistent or locally installed fonts. See bug 40893726.
Notes 3 item(s)
Limitation
  • This browser only partially implements this feature
Removed
  • This feature was removed in a later browser version (120)
Implementation note
  • Prior to version 120, this method returned `false` instead of `true` for nonexistent or locally installed fonts. See bug 40893726.
Notes 3 item(s)
Limitation
  • This browser only partially implements this feature
Removed
  • This feature was removed in a later browser version (26.2)
Implementation note
  • The `onloading` event handler is supported, but the event never fires. See bug 304091.
Notes 3 item(s)
Limitation
  • This browser only partially implements this feature
Removed
  • This feature was removed in a later browser version (26.2)
Implementation note
  • The `onloading` event handler is supported, but the event never fires. See bug 304091.
Notes 2 item(s)
Limitation
  • This browser only partially implements this feature
Implementation note
  • The `onloadingdone` event handler is supported, but the event never fires. See bug 304091.
Notes 2 item(s)
Limitation
  • This browser only partially implements this feature
Implementation note
  • The `onloadingdone` event handler is supported, but the event never fires. See bug 304091.
Notes 2 item(s)
Limitation
  • This browser only partially implements this feature
Implementation note
  • The `onloadingerror` event handler is supported, but the event never fires. See bug 304091.
Notes 2 item(s)
Limitation
  • This browser only partially implements this feature
Implementation note
  • The `onloadingerror` event handler is supported, but the event never fires. See bug 304091.

Use cases

  • Using Font loading

    The fonts property of the Document interface returns the FontFaceSet interface of the document.

Cautions

  • May not be supported in older browsers.

Implementation notes

  • Some APIs require a secure context (HTTPS) or user activation. Check the requirements before use.

Related links