window: queryLocalFonts() method
Experimental: This is an experimental technology
Check the Browser compatibility table carefully before using this in production.
The window.queryLocalFonts()
method returns a Promise
that fulfills with an array of FontData
objects representing the font faces available locally.
To use this method, the user must grant permission to access 'local-fonts'
(permission status can be queried via the Permissions API). In addition, this feature may be blocked by a Permissions Policy set on your server.
Syntax
js
queryLocalFonts(options)
Parameters
options
Optional-
Contains optional configuration parameters. Currently only one property is defined:
postscriptNames
-
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.
Return value
Exceptions
NotAllowedError
DOMException
-
The user chose to deny permission to use this feature when presented with the browser's permission prompt after the method was first invoked.
SecurityError
DOMException
-
Use of this feature was blocked by a Permissions Policy, or it was not called via a user interaction such as a button press.
Examples
For a working live demo, see Font Select 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);
}
}
Limiting returned results
To limit the returned font data to only a specific list of font faces, use the postscriptNames
option.
js
async function returnSpecificFonts() {
const availableFonts = await window.queryLocalFonts({
postscriptNames: ["Verdana", "Verdana-Bold", "Verdana-Italic"],
});
return availableFonts;
}
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://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);
}
}
Specifications
Specification |
---|
Local Font Access # dom-window-querylocalfonts |
Browser compatibility
BCD tables only load in the browser