FontData

Limited availability

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

Experimental: This is an experimental technology
Check the Browser compatibility table carefully before using this in production.

The FontData interface of the Local Font Access API represents a single local font face.

Instance properties

FontData.family Read only

Returns the family of the font face.

FontData.fullName Read only

Returns the full name of the font face.

FontData.postscriptName Read only

Returns the PostScript name of the font face.

FontData.style Read only

Returns the style of the font face.

Instance methods

FontData.blob()

Returns a Promise that fulfills with a Blob containing the raw bytes of the underlying font file.

Examples

For a live example, see our Local 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.

js
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

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

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

Specifications

Specification
Local Font Access API
# fontdata-interface

Browser compatibility

desktop mobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
FontData
Experimental
Chrome – Full support
Chrome 103 (Release date: 2022-06-21)
footnote Full support
Edge – Full support
Edge 103 (Release date: 2022-06-23)
footnote Full support
Firefox – No support
Firefox
footnote No support
Opera – Full support
Opera 89 (Release date: 2022-07-07)
footnote Full support
Safari – No support
Safari
footnote No support
Chrome Android – No support
Chrome Android
footnote
footnote See bug 40840834
Firefox for Android – No support
Firefox for Android
footnote No support
Opera Android – No support
Opera Android
footnote
footnote See bug 40840834
Safari on iOS – No support
Safari on iOS
footnote No support
Samsung Internet – No support
Samsung Internet
footnote
footnote See bug 40840834
WebView Android – No support
WebView Android
footnote
footnote See bug 40840834
WebView on iOS – No support
WebView on iOS
footnote No support
blob
Experimental
Chrome – Full support
Chrome 103 (Release date: 2022-06-21)
footnote Full support
Edge – Full support
Edge 103 (Release date: 2022-06-23)
footnote Full support
Firefox – No support
Firefox
footnote No support
Opera – Full support
Opera 89 (Release date: 2022-07-07)
footnote Full support
Safari – No support
Safari
footnote No support
Chrome Android – No support
Chrome Android
footnote No support
Firefox for Android – No support
Firefox for Android
footnote No support
Opera Android – No support
Opera Android
footnote No support
Safari on iOS – No support
Safari on iOS
footnote No support
Samsung Internet – No support
Samsung Internet
footnote No support
WebView Android – No support
WebView Android
footnote No support
WebView on iOS – No support
WebView on iOS
footnote No support
family
Experimental
Chrome – Full support
Chrome 103 (Release date: 2022-06-21)
footnote Full support
Edge – Full support
Edge 103 (Release date: 2022-06-23)
footnote Full support
Firefox – No support
Firefox
footnote No support
Opera – Full support
Opera 89 (Release date: 2022-07-07)
footnote Full support
Safari – No support
Safari
footnote No support
Chrome Android – No support
Chrome Android
footnote No support
Firefox for Android – No support
Firefox for Android
footnote No support
Opera Android – No support
Opera Android
footnote No support
Safari on iOS – No support
Safari on iOS
footnote No support
Samsung Internet – No support
Samsung Internet
footnote No support
WebView Android – No support
WebView Android
footnote No support
WebView on iOS – No support
WebView on iOS
footnote No support
fullName
Experimental
Chrome – Full support
Chrome 103 (Release date: 2022-06-21)
footnote Full support
Edge – Full support
Edge 103 (Release date: 2022-06-23)
footnote Full support
Firefox – No support
Firefox
footnote No support
Opera – Full support
Opera 89 (Release date: 2022-07-07)
footnote Full support
Safari – No support
Safari
footnote No support
Chrome Android – No support
Chrome Android
footnote No support
Firefox for Android – No support
Firefox for Android
footnote No support
Opera Android – No support
Opera Android
footnote No support
Safari on iOS – No support
Safari on iOS
footnote No support
Samsung Internet – No support
Samsung Internet
footnote No support
WebView Android – No support
WebView Android
footnote No support
WebView on iOS – No support
WebView on iOS
footnote No support
postscriptName
Experimental
Chrome – Full support
Chrome 103 (Release date: 2022-06-21)
footnote Full support
Edge – Full support
Edge 103 (Release date: 2022-06-23)
footnote Full support
Firefox – No support
Firefox
footnote No support
Opera – Full support
Opera 89 (Release date: 2022-07-07)
footnote Full support
Safari – No support
Safari
footnote No support
Chrome Android – No support
Chrome Android
footnote No support
Firefox for Android – No support
Firefox for Android
footnote No support
Opera Android – No support
Opera Android
footnote No support
Safari on iOS – No support
Safari on iOS
footnote No support
Samsung Internet – No support
Samsung Internet
footnote No support
WebView Android – No support
WebView Android
footnote No support
WebView on iOS – No support
WebView on iOS
footnote No support
style
Experimental
Chrome – Full support
Chrome 103 (Release date: 2022-06-21)
footnote Full support
Edge – Full support
Edge 103 (Release date: 2022-06-23)
footnote Full support
Firefox – No support
Firefox
footnote No support
Opera – Full support
Opera 89 (Release date: 2022-07-07)
footnote Full support
Safari – No support
Safari
footnote No support
Chrome Android – No support
Chrome Android
footnote No support
Firefox for Android – No support
Firefox for Android
footnote No support
Opera Android – No support
Opera Android
footnote No support
Safari on iOS – No support
Safari on iOS
footnote No support
Samsung Internet – No support
Samsung Internet
footnote No support
WebView Android – No support
WebView Android
footnote No support
WebView on iOS – No support
WebView on iOS
footnote No support

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support
Experimental. Expect behavior to change in the future.
See implementation notes.

See also