FontData

Limited availability

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.

TheFontData interface of theLocal Font Access API represents a single local font face.

Instance properties

FontData.familyRead onlyExperimental: Returns the family of the font face.
FontData.fullNameRead onlyExperimental: Returns the full name of the font face.
FontData.postscriptNameRead onlyExperimental: Returns the PostScript name of the font face.
FontData.styleRead onlyExperimental: Returns the style of the font face.

Instance methods

FontData.blob()Experimental: Returns a Promise that fulfills with aBlob containing the raw bytes of the underlying font file.

Examples

For a live example, 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);  }}

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);  }}