JavaScript Document fonts Property

Beginner
5 min read
Updated: Nov 2026
3 examples
Property
Decorative image with the word FONTS

Definition

document.fonts returns the document’s FontFaceSet — the CSS Font Loading API entry point for loading fonts and checking their status (MDN).

Read the notes below before you get or set this property. Prefer feature detection when support is limited.

Syntax

Use document.fonts. Start with this line.

JavaScript
document.fonts
CallWhat it does
document.fontsPrimary signature.

Built into the browser. Read or assign document.fonts — no import required.

Library declarations
JavaScript
document.fonts

Parameters

ParameterDescription
Writable?Optional. Read-only property

Return Value

Return ValueDescription
*FontFaceSet

JavaScript Examples

Example 1 — Work After fonts.ready

MDN: run code only after used fonts finish loading and layout.

JavaScript
document.fonts.ready.then((fontFaceSet) => {
  const faces = [...fontFaceSet];
  console.log(faces.length);
  console.log(faces.map((f) => f.status));
});
Try It Yourself

How It Works

  1. Await fonts.ready. Promise for used-font load + layout (MDN).
  2. Receive the FontFaceSet. Same set as document.fonts.
  3. Spread into an array. Easy to log length and each status.
  4. Do measurements next. Safe point for canvas / text metrics.

Example 2 — Read status and size

Inspect the set while it loads, then again after ready.

JavaScript
console.log(document.fonts.status); // "loading" | "loaded"
console.log(document.fonts.size);

document.fonts.ready.then(() => {
  console.log("after ready:", document.fonts.status);
});
Try It Yourself

How It Works

  1. Read status. Set-level loading state (MDN).
  2. Read size. Number of FontFace values in the set.
  3. Wait on ready. Confirms when used fonts settle.
  4. Size can stay small if the page only uses system fonts.

Example 3 — fonts.check() Without Loading

Ask whether a font is available — does not start a download.

JavaScript
console.log(document.fonts.check("16px system-ui"));
console.log(document.fonts.check('16px "MyFancyFont"'));
Try It Yourself

How It Works

  1. Pass a font string. Same shape as CSS font shorthand bits (size + family).
  2. check returns a boolean. MDN: does not initiate a load.
  3. System fonts often return true. Missing custom families return false.
  4. Use load() when you want to fetch matching faces.
Compatibility

Browser Support

Document.fonts is marked Baseline Widely available on MDN (since January 2020). It is part of the CSS Font Loading API. Logos use the shared browser-image-sprite.png sprite from this project.

✓ Baseline · Widely available

Document.fonts

Returns the document FontFaceSet for loading and inspecting fonts.

Widely Available
Google Chrome Full support · Desktop & Mobile
Full support
Mozilla Firefox Full support · Desktop & Mobile
Full support
Apple Safari Full support · macOS & iOS
Full support
Microsoft Edge Full support · Chromium
Full support
Opera Full support · Modern versions
Full support
Internet Explorer Not supported
No
Document.fonts Baseline support

Bottom line: Safe to use in modern browsers. See the MDN Document.fonts and FontFaceSet references.

Frequently Asked Questions

The FontFaceSet interface for the document. MDN: useful for loading new fonts and checking the status of previously loaded fonts. Part of the CSS Font Loading API.
No. MDN marks Document.fonts as Baseline Widely available (since January 2020). It is a standard Document property.
A Promise that fulfills when loading and layout of all used fonts are done (MDN). Put measurement or paint-sensitive work inside its then/await callback.
Not necessarily. MDN notes used fonts can differ from declared fonts — for example optional fonts (font-display: optional) that did not load in time.
Create a FontFace, call face.load(), then document.fonts.add(face), or use document.fonts.load("12px MyFont") to request matching faces.
Yes. FontFaceSet is also available as self.fonts in web workers (MDN). Document.fonts is the document entry point in window contexts.

Next: Document forms

Learn the live HTMLCollection of every form in the document.

forms tutorial →

About the author

Mari Selvan M P
Mari Selvan M P 🔗

Developer, cloud engineer, and technical writer

  • Experience 12 years building web and cloud systems
  • Focus Full Stack Development, AWS, and Developer Education

I write practical tutorials so students and working developers can learn by doing—from databases and APIs to deployment on AWS.

AWS Certified Developer – Associate (Credly)

11 people found this page helpful

JavaScript Document firstElementChild Property JavaScript Document forms Property