Repository navigation
Expand file tree
/
Copy pathindex.md
More file actions
129 lines (99 loc) · 4.43 KB
/
Copy pathindex.md
File metadata and controls
129 lines (99 loc) · 4.43 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
---
title: "Window: queryLocalFonts() method"
short-title: queryLocalFonts()
slug: Web/API/Window/queryLocalFonts
page-type: web-api-instance-method
status:
- experimental
browser-compat: api.Window.queryLocalFonts
---
{{APIRef("Local Font Access API")}}{{SeeCompatTable}}{{SecureContext_Header}}
The **`window.queryLocalFonts()`** method returns a {{jsxref("Promise")}} that fulfills with an array of {{domxref("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 {{domxref("Permissions API", "", "", "nocode")}}). In addition, this feature may be blocked by a [Permissions Policy](/en-US/docs/Web/HTTP/Guides/Permissions_Policy) set on your server.
## Syntax
```js-nolint
queryLocalFonts(options)
```
### Parameters
- `options` {{optional_inline}}
- : Contains optional configuration parameters. Currently only one property is defined:
- `postscriptNames` {{optional_inline}}
- : 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; if not, all fonts will be included in the results.
### Return value
A {{jsxref("Promise")}} that fulfills with an array of {{domxref("FontData")}} objects representing the font faces available locally.
### Exceptions
- `NotAllowedError` {{domxref("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` {{domxref("DOMException")}}
- : Use of this feature was blocked by a [Permissions Policy](/en-US/docs/Web/HTTP/Guides/Permissions_Policy), or it was not called via a user interaction such as a button press, or current {{glossary("origin")}} is an opaque origin.
## Examples
For a working live demo, see our [Local Font Access API demo](https://mdn.github.io/dom-examples/local-font-access/).
### 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 {{domxref("FontData.blob", "blob()")}} method provides access to low-level [SFNT](https://en.wikipedia.org/wiki/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
{{Specifications}}
## Browser compatibility
{{Compat}}
## See also
- {{domxref("Local Font Access API", "Local Font Access API", "", "nocode")}}
- [Use advanced typography with local fonts](https://developer.chrome.com/docs/capabilities/web-apis/local-fonts)
- {{cssxref("@font-face")}}