Window: queryLocalFonts() method

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Experimental:This is anexperimental technology
Check theBrowser compatibility table carefully before using this in production.

Secure context: This feature is available only insecure contexts (HTTPS), in some or allsupporting browsers.

Thewindow.queryLocalFonts() method returns aPromise that fulfills with an array ofFontData objects representing the font faces available locally.

To use this method, the user must grant permission to accesslocal-fonts (permission status can be queried via thePermissions API). In addition, this feature may be blocked by aPermissions Policy set on your server.

Syntax

queryLocalFonts(options)

Parameters

optionsOptional

Contains optional configuration parameters. Currently only one property is defined:

postscriptNamesOptional: An array of font PostScript names. If this is specified, only fonts with PostScript names matching those in the array will be included in the results; if not, all fonts will be included in the results.

Return value

APromise that fulfills with an array ofFontData objects representing the font faces available locally.

Exceptions

NotAllowedErrorDOMException: The user chose to deny permission to use this feature when presented with the browser's permission prompt after the method was first invoked.
SecurityErrorDOMException: Use of this feature was blocked by aPermissions Policy, or it was not called via a user interaction such as a button press, or currentorigin is an opaque origin.

Examples

For a working live demo, see ourLocal Font Access API demo.

Font enumeration

The following snippet will query for all available fonts and log metadata. This could be used, for example, to populate a font picker control.

async function logFontData() {  try {    const availableFonts = await window.queryLocalFonts();    for (const fontData of availableFonts) {      console.log(fontData.postscriptName);      console.log(fontData.fullName);      console.log(fontData.family);      console.log(fontData.style);    }  } catch (err) {    console.error(err.name, err.message);  }}

Limiting returned results

To limit the returned font data to only a specific list of font faces, use thepostscriptNames option.

async function returnSpecificFonts() {  const availableFonts = await window.queryLocalFonts({    postscriptNames: ["Verdana", "Verdana-Bold", "Verdana-Italic"],  });  return availableFonts;}

Accessing low-level data

Theblob() method provides access to low-levelSFNT data — this is a font file format that can contain other font formats, such as PostScript, TrueType, OpenType, or Web Open Font Format (WOFF).

async function computeOutlineFormat() {  try {    const availableFonts = await window.queryLocalFonts({      postscriptNames: ["ComicSansMS"],    });    for (const fontData of availableFonts) {      // `blob()` returns a Blob containing valid and complete      // SFNT-wrapped font data.      const sfnt = await fontData.blob();      // Slice out only the bytes we need: the first 4 bytes are the SFNT      // version info.      // Spec: https://learn.microsoft.com/en-us/typography/opentype/spec/otff#organization-of-an-opentype-font      const sfntVersion = await sfnt.slice(0, 4).text();      let outlineFormat = "UNKNOWN";      switch (sfntVersion) {        case "\x00\x01\x00\x00":        case "true":        case "typ1":          outlineFormat = "truetype";          break;        case "OTTO":          outlineFormat = "cff";          break;      }      console.log("Outline format:", outlineFormat);    }  } catch (err) {    console.error(err.name, err.message);  }}