Limited supportUse with care and provide a fallback when broad support matters.
Embedded Limited support

Local fonts

The window.queryLocalFonts() method returns an array of locally-installed fonts, each represented by a FontData object. It is most useful when native HTML semantics or browser capabilities can replace custom implementation work.

Embedded

Overview

The window.queryLocalFonts() method returns an array of locally-installed fonts, each represented by a FontData object. It is most useful when native HTML semantics or browser capabilities can replace custom implementation work.

Browser support

Feature Desktop Mobile
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
FontData
Experimental
103
103
blob
Experimental

The blob() method of the FontData interface returns a Promise that fulfills with a Blob containing the raw bytes of the underlying font file.
103
103
family
Experimental

The family read-only property of the FontData interface returns the family of the font face.
103
103
fullName
Experimental

The fullName read-only property of the FontData interface returns the full name of the font face. This is usually a human-readable name used to identify the font, e.g., "Optima Bold".
103
103
postscriptName
Experimental

The postscriptName read-only property of the FontData interface returns the PostScript name of the font face.
103
103
style
Experimental

The style read-only property of the FontData interface returns the style of the font face.
103
103
permission_local-fonts
Experimental

`local-fonts` permission
103
103
queryLocalFonts
Experimental

The window.queryLocalFonts() method returns a Promise that fulfills with an array of FontData objects representing the font faces available locally.
103
103
Other
html.elements.iframe.allow.local-fonts
Experimental
103
103
http.headers.Permissions-Policy.local-fonts
Experimental

The HTTP Permissions-Policy header local-fonts directive controls whether the current document is allowed to gather data on the user's locally-installed fonts via the Window.queryLocalFonts() method.
103
103
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)

Syntax

JAVASCRIPT 
const fonts = await window.queryLocalFonts();
for (const font of fonts) {
  console.log(font.family, font.fullName, font.style);
}

Use cases

  • Use Local fonts

    Use Local fonts when standard HTML needs a more specific platform feature, semantic signal, or browser capability.

  • Handle edge cases

    Apply Local fonts to solve a focused requirement without redesigning the whole page architecture.

Cautions

  • Test Local fonts in your target browsers and input environments before depending on it as a primary behavior.
  • Provide a fallback path or acceptable degradation strategy when support is still limited.

Accessibility

  • Make sure Local fonts supports the intended task without making the page harder to perceive, understand, or operate.

Related links

Powered by web-features