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.familyRead only Experimental-
Returns the family of the font face.
FontData.fullNameRead only Experimental-
Returns the full name of the font face.
FontData.postscriptNameRead only Experimental-
Returns the PostScript name of the font face.
FontData.styleRead only Experimental-
Returns the style of the font face.
Instance methods
FontData.blob()Experimental-
Returns a
Promisethat fulfills with aBlobcontaining 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.
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).
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
Loading…