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.
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.
FontData.family
Read only Experimental
Returns the family of the font face.
FontData.fullName
Read only Experimental
Returns the full name of the font face.
FontData.postscriptName
Read only Experimental
Returns the PostScript name of the font face.
FontData.style
Read only Experimental
Returns the style of the font face.
FontData.blob()
Read only Experimental
Returns a Promise
that fulfills with a Blob
containing the raw bytes of the underlying font file.
For a working live demo, see Font Select Demo.
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); } }
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://docs.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); } }
Specification |
---|
Local Font Access # fontdata-interface |
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet | |
FontData |
103 | 103 | No | No | No | No | No | No | No | No | No | No |
blob |
103 | 103 | No | No | No | No | No | No | No | No | No | No |
family |
103 | 103 | No | No | No | No | No | No | No | No | No | No |
fullName |
103 | 103 | No | No | No | No | No | No | No | No | No | No |
postscriptName |
103 | 103 | No | No | No | No | No | No | No | No | No | No |
style |
103 | 103 | No | No | No | No | No | No | No | No | No | No |
© 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/FontData