Learn how the Local Font Access API allows you to access the user's locally installed fonts and obtain low-level details about them
 Thomas Steiner [GitHub](https://github.com/tomayac) [LinkedIn](https://www.linkedin.com/in/thomassteinerlinkedin) [Mastodon](https://toot.cafe/@tomayac) [Bluesky](https://bsky.app/profile/tomayac.com) [Homepage](https://blog.tomayac.com/)
Published: August 24, 2020
> [!TIP]
> **Success:** The Local Font Access API was part of the [capabilities project](https://developer.chrome.com/blog/capabilities) and is now available from Chrome 103 on desktop.
## Web safe fonts
If you have been doing web development long enough, you may remember the so-called
[web safe fonts](https://developer.mozilla.org/docs/Learn/CSS/Styling_text/Fundamentals#Web_safe_fonts).
These fonts are known to be available on nearly all instances of the most used operating systems
(namely Windows, macOS, the most common Linux distributions, Android, and iOS). In the early 2000s,
Microsoft even spearheaded an
[initiative](https://web.archive.org/web/20020124085641/http://www.microsoft.com/typography/fontpack/default.htm)
called *TrueType core fonts for the Web* that provided these fonts for free download with the
objective that *"whenever you visit a Web site that specifies them, you'll see pages exactly as the
site designer intended"* . Yes, this included sites set in
[Comic Sans MS](https://docs.microsoft.com/en-us/typography/font-list/comic-sans-ms). Here is a
classic web safe font stack (with the ultimate fallback of whatever
[`sans-serif`](https://developer.mozilla.org/docs/Web/CSS/font-family#%3Cgeneric-name%3E:%7E:text=sans%2Dserif,-Glyphs)
font) might look like this:
body {
font-family: Helvetica, Arial, sans-serif;
}
## Web fonts
The days where web safe fonts really mattered are long gone. Today, we have
[web fonts](https://developer.mozilla.org/docs/Learn/CSS/Styling_text/Web_fonts), some of which are
even [variable fonts](https://web.dev/articles/variable-fonts) that we can tweak further by changing the values for the
various exposed axes. You can use web fonts by declaring an
[`@font-face`](https://developer.mozilla.org/docs/Web/CSS/@font-face) block at the start of the CSS,
which specifies the font file(s) to download:
@font-face {
font-family: 'FlamboyantSansSerif';
src: url('flamboyant.woff2');
}
After this, you can then use the custom web font by specifying the
[`font-family`](https://developer.mozilla.org/docs/Web/CSS/font-family), as normal:
body {
font-family: 'FlamboyantSansSerif';
}
## Local fonts as fingerprint vector
Most web fonts come from, well, the web. An interesting fact, though, is that the
[`src`](https://developer.mozilla.org/docs/Web/CSS/@font-face/src) property in the `@font-face`
declaration, apart from the
[`url()`](https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/src#url)
function, also accepts a
[`local()`](https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/src#localfont-face-name)
function. This allows custom fonts to be loaded (surprise!) locally. If the user happens to have
*FlamboyantSansSerif* installed on their operating system, the local copy will be used rather than
it being downloaded:
@font-face {
font-family: 'FlamboyantSansSerif';
src: local('FlamboyantSansSerif'), url('flamboyant.woff2');
}
This approach provides a nice fallback mechanism that potentially saves bandwidth. On the Internet,
unfortunately, we cannot have nice things. The problem with the `local()` function is that it can be
abused for browser fingerprinting. Turns out, the list of fonts a user has installed can be pretty
identifying. A lot of companies have their own corporate fonts that are installed on employees'
laptops. For example, Google has a corporate font called *Google Sans*.
 The Google Sans font installed on a Google employee's laptop.
An attacker can try to determine what company someone works for by testing for the existence of a
large number of known corporate fonts like *Google Sans* . The attacker would attempt rendering text
set in these fonts on a canvas and measure the glyphs. If the glyphs match the known shape of the
corporate font, the attacker has a hit. If the glyphs do not match, the attacker knows that a
default replacement font was used since the corporate font was not installed. For full details on
this and other browser fingerprinting attacks, read the
[survey paper](http://www-sop.inria.fr/members/Nataliia.Bielova/papers/Lape-etal-20-TWEB.pdf) by
Laperdix *et al.*
Company fonts apart, even just the list of installed fonts can be identifying. The situation with
this attack vector has become so bad that recently the WebKit team
[decided](https://webkit.org/tracking-prevention/#table-of-contents-toggle:%7E:text=Changed%20font%20availability%20to%20web%20content,but%20not%20locally%20user%2Dinstalled%20fonts)
to *"only include \[in the list available fonts\] web fonts and fonts that come with the operating
system, but not locally user-installed fonts"*. (And here I am, with an article on granting access
to local fonts.)
## The Local Font Access API
The beginning of this article may have put you in a negative mood. Can we really not have nice
things? Fret not. We think we can, and maybe
[everything is not hopeless](http://hyperboleandahalf.blogspot.com/2013/05/depression-part-two.html#Blog1:%7E:text=like-,hopeless).
But first, let me answer a question that you might be asking yourself.
### Why do we need the Local Font Access API when there are web fonts?
Professional-quality design and graphics tools have historically been difficult to deliver on the
web. One stumbling block has been an inability to access and use the full variety of professionally
constructed and hinted fonts that designers have locally installed. Web fonts enable some publishing
use-cases, but fail to enable programmatic access to the vector glyph shapes and font tables used by
rasterizers to render the glyph outlines. There is likewise no way to access a web font's binary
data.
- Design tools need access to font bytes to do their own OpenType layout implementation and allow design tools to hook in at lower levels, for actions such as performing vector filters or transforms on the glyph shapes.
- Developers may have legacy font stacks for their applications that they are bringing to the web. To use these stacks, they usually require direct access to font data, something web fonts do not provide.
- Some fonts may not be licensed for delivery over the web. For example, Linotype has a license for some fonts that only includes [desktop use](https://www.linotype.com/25/font-licensing.html).
The Local Font Access API is an attempt at solving these challenges. It consists of two parts:
- A **font enumeration API**, which allows users to grant access to the full set of available system fonts.
- From each enumeration result, the ability to request low-level (byte-oriented) **SFNT container
access** that includes the full font data.
### Browser support
Browser Support
- ' d='M96 183a64 64 0 0 1-23-23L17 64a128 128 0 0 0 111 192l55-96a64 64 0 0 1-87 23Z'/%3E%3Cpath fill='url(%23b)' d='M192 128a64 64 0 0 1-9 32l-55 96A128 128 0 0 0 239 64H128a64 64 0 0 1 64 64Z'/%3E%3Ccircle cx='128' cy='128' r='52' fill='%231a73e8'/%3E%3Cpath fill='url(%23c)' d='M96 73a64 64 0 0 1 32-9h111a128 128 0 0 0-222 0l56 96a64 64 0 0 1 23-87Z'/%3E%3C/svg%3E)
- ' xlink:href='%23A'%3E%3Cstop offset='.76' stop-opacity='0'/%3E%3Cstop offset='.95' stop-opacity='.5'/%3E%3Cstop offset='1'/%3E%3C/radialGradient%3E%3CradialGradient id='F' cx='2523' cy='4680' r='20243' gradientTransform='matrix(-.03715 .99931 -2.12836 -.07913 13579 3530)' xlink:href='%23A'%3E%3Cstop offset='0' stop-color='%2335c1f1'/%3E%3Cstop offset='.11' stop-color='%2334c1ed'/%3E%3Cstop offset='.23' stop-color='%232fc2df'/%3E%3Cstop offset='.31' stop-color='%232bc3d2'/%3E%3Cstop offset='.67' stop-color='%2336c752'/%3E%3C/radialGradient%3E%3CradialGradient id='G' cx='24247' cy='7758' r='9734' gradientTransform='matrix(.28109 .95968 -.78353 .22949 24510 -16292)' xlink:href='%23A'%3E%3Cstop offset='0' stop-color='%2366eb6e'/%3E%3Cstop offset='1' stop-color='%2366eb6e' stop-opacity='0'/%3E%3C/radialGradient%3E%3Cpath id='H' d='M24105 20053a9345 9345 0 01-1053 472 10202 10202 0 01-3590 646c-4732 0-8855-3255-8855-7432 0-1175 680-2193 1643-2729-4280 180-5380 4640-5380 7253 0 7387 6810 8137 8276 8137 791 0 1984-230 2704-456l130-44a12834 12834 0 006660-5282c220-350-168-757-535-565z'/%3E%3Cpath id='I' d='M11571 25141a7913 7913 0 01-2273-2137 8145 8145 0 01-1514-4740 8093 8093 0 013093-6395 8082 8082 0 011373-859c312-148 846-414 1554-404a3236 3236 0 012569 1297 3184 3184 0 01636 1866c0-21 2446-7960-8005-7960-4390 0-8004 4166-8004 7820 0 2319 538 4170 1212 5604a12833 12833 0 007684 6757 12795 12795 0 003908 610c1414 0 2774-233 4045-656a7575 7575 0 01-6278-803z'/%3E%3Cpath id='J' d='M16231 15886c-80 105-330 250-330 566 0 260 170 512 472 723 1438 1003 4149 868 4156 868a5954 5954 0 003027-839 6147 6147 0 001133-850 6180 6180 0 001910-4437c26-2242-796-3732-1133-4392-2120-4141-6694-6525-11668-6525-7011 0-12703 5635-12798 12620 47-3654 3679-6605 7996-6605 350 0 2346 34 4200 1007 1634 858 2490 1894 3086 2921 618 1067 728 2415 728 2952s-271 1333-780 1990z'/%3E%3Cuse fill='url(%23B)' xlink:href='%23H'/%3E%3Cuse fill='url(%23D)' opacity='.35' xlink:href='%23H'/%3E%3Cuse fill='url(%23C)' xlink:href='%23I'/%3E%3Cuse fill='url(%23E)' opacity='.4' xlink:href='%23I'/%3E%3Cuse fill='url(%23F)' xlink:href='%23J'/%3E%3Cuse fill='url(%23G)' xlink:href='%23J'/%3E%3C/svg%3E)
- ' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='.2' stop-color='%239059ff' stop-opacity='0'/%3E%3Cstop offset='.3' stop-color='%238c4ff3' stop-opacity='.1'/%3E%3Cstop offset='.8' stop-color='%237716a8' stop-opacity='.5'/%3E%3Cstop offset='1' stop-color='%236e008b' stop-opacity='.6'/%3E%3C/radialGradient%3E%3CradialGradient id='ff-g' cx='239.1' cy='34.6' r='171.6' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%23ffe226'/%3E%3Cstop offset='.1' stop-color='%23ffdb27'/%3E%3Cstop offset='.3' stop-color='%23ffc82a'/%3E%3Cstop offset='.5' stop-color='%23ffa930'/%3E%3Cstop offset='.7' stop-color='%23ff7e37'/%3E%3Cstop offset='.8' stop-color='%23ff7139'/%3E%3C/radialGradient%3E%3CradialGradient id='ff-h' cx='374' cy='-74.3' r='732.2' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='.1' stop-color='%23fff44f'/%3E%3Cstop offset='.5' stop-color='%23ff980e'/%3E%3Cstop offset='.6' stop-color='%23ff5634'/%3E%3Cstop offset='.7' stop-color='%23ff3647'/%3E%3Cstop offset='.9' stop-color='%23e31587'/%3E%3C/radialGradient%3E%3CradialGradient id='ff-i' cx='304.6' cy='7.1' r='536.4' gradientTransform='rotate(84 303 4)' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%23fff44f'/%3E%3Cstop offset='.1' stop-color='%23ffe847'/%3E%3Cstop offset='.2' stop-color='%23ffc830'/%3E%3Cstop offset='.3' stop-color='%23ff980e'/%3E%3Cstop offset='.4' stop-color='%23ff8b16'/%3E%3Cstop offset='.5' stop-color='%23ff672a'/%3E%3Cstop offset='.6' stop-color='%23ff3647'/%3E%3Cstop offset='.7' stop-color='%23e31587'/%3E%3C/radialGradient%3E%3CradialGradient id='ff-j' cx='235' cy='98.1' r='457.1' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='.1' stop-color='%23fff44f'/%3E%3Cstop offset='.5' stop-color='%23ff980e'/%3E%3Cstop offset='.6' stop-color='%23ff5634'/%3E%3Cstop offset='.7' stop-color='%23ff3647'/%3E%3Cstop offset='.9' stop-color='%23e31587'/%3E%3C/radialGradient%3E%3CradialGradient id='ff-k' cx='355.7' cy='124.9' r='500.3' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='.1' stop-color='%23fff44f'/%3E%3Cstop offset='.2' stop-color='%23ffe141'/%3E%3Cstop offset='.5' stop-color='%23ffaf1e'/%3E%3Cstop offset='.6' stop-color='%23ff980e'/%3E%3C/radialGradient%3E%3ClinearGradient id='ff-a' x1='446.9' y1='76.8' x2='47.9' y2='461.8' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='.1' stop-color='%23fff44f'/%3E%3Cstop offset='.1' stop-color='%23ffe847'/%3E%3Cstop offset='.2' stop-color='%23ffc830'/%3E%3Cstop offset='.4' stop-color='%23ff980e'/%3E%3Cstop offset='.4' stop-color='%23ff8b16'/%3E%3Cstop offset='.5' stop-color='%23ff672a'/%3E%3Cstop offset='.5' stop-color='%23ff3647'/%3E%3Cstop offset='.7' stop-color='%23e31587'/%3E%3C/linearGradient%3E%3ClinearGradient id='ff-l' x1='442.1' y1='74.8' x2='102.6' y2='414.3' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='.2' stop-color='%23fff44f' stop-opacity='.8'/%3E%3Cstop offset='.3' stop-color='%23fff44f' stop-opacity='.6'/%3E%3Cstop offset='.5' stop-color='%23fff44f' stop-opacity='.2'/%3E%3Cstop offset='.6' stop-color='%23fff44f' stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M479 166c-11-25-32-52-49-60a249 249 0 0 1 25 73c-27-68-73-95-111-155a255 255 0 0 1-8-14 44 44 0 0 1-4-9 1 1 0 0 0 0-1 1 1 0 0 0-1 0c-60 35-81 101-83 134a120 120 0 0 0-66 25 71 71 0 0 0-6-5 111 111 0 0 1-1-58c-25 11-44 29-58 44-9-12-9-52-8-60l-8 4a175 175 0 0 0-24 21 210 210 0 0 0-22 26 203 203 0 0 0-32 73l-1 2-2 15a229 229 0 0 0-4 34v1a240 240 0 0 0 477 40l1-9c5-41 0-84-15-121zM202 355l3 1-3-1zm55-145zm198-31z' fill='url(%23ff-a)'/%3E%3Cpath d='M479 166c-11-25-32-52-49-60 14 26 22 53 25 72v1a207 207 0 0 1-206 279c-113-3-212-87-231-197-3-17 0-26 2-40-2 11-3 14-4 34v1a240 240 0 0 0 477 40l1-9c5-41 0-84-15-121z' fill='url(%23ff-b)'/%3E%3Cpath d='M479 166c-11-25-32-52-49-60 14 26 22 53 25 72v1a207 207 0 0 1-206 279c-113-3-212-87-231-197-3-17 0-26 2-40-2 11-3 14-4 34v1a240 240 0 0 0 477 40l1-9c5-41 0-84-15-121z' fill='url(%23ff-c)'/%3E%3Cpath d='m362 195 1 1a130 130 0 0 0-22-29C266 92 322 5 331 0c-60 35-81 101-83 134l9-1c45 0 84 25 105 62z' fill='url(%23ff-d)'/%3E%3Cpath d='M257 210c-1 6-22 26-29 26-68 0-80 41-80 41 3 35 28 64 57 79l4 2 7 3a107 107 0 0 0 31 6c120 6 143-143 57-186 22-4 45 5 58 14-21-37-60-62-105-62l-9 1a120 120 0 0 0-66 25l17 16c16 16 58 33 58 35z' fill='url(%23ff-e)'/%3E%3Cpath d='M257 210c-1 6-22 26-29 26-68 0-80 41-80 41 3 35 28 64 57 79l4 2 7 3a107 107 0 0 0 31 6c120 6 143-143 57-186 22-4 45 5 58 14-21-37-60-62-105-62l-9 1a120 120 0 0 0-66 25l17 16c16 16 58 33 58 35z' fill='url(%23ff-f)'/%3E%3Cpath d='m171 151 5 3a111 111 0 0 1-1-58c-25 11-44 29-58 44 1 0 36 0 54 11z' fill='url(%23ff-g)'/%3E%3Cpath d='M18 261a242 242 0 0 0 231 197 207 207 0 0 0 206-279c8 56-20 110-64 146-86 71-169 43-186 31l-3-1c-50-24-71-70-67-110-42 0-57-35-57-35s38-28 89-4c46 22 90 4 90 4 0-2-42-19-58-35l-17-16a71 71 0 0 0-6-5l-5-3c-18-11-52-11-54-11-9-12-9-51-8-60l-8 4a175 175 0 0 0-24 21 210 210 0 0 0-22 26 203 203 0 0 0-32 73c0 1-9 38-5 57z' fill='url(%23ff-h)'/%3E%3Cpath d='M341 167a130 130 0 0 1 22 29 46 46 0 0 1 4 3c55 50 26 121 24 126 44-36 72-90 64-146-27-68-73-95-111-155a255 255 0 0 1-8-14 44 44 0 0 1-4-9 1 1 0 0 0 0-1 1 1 0 0 0-1 0c-9 5-65 92 10 167z' fill='url(%23ff-i)'/%3E%3Cpath d='M367 199a46 46 0 0 0-4-3l-1-1c-13-9-36-18-58-15 86 44 63 193-57 187a107 107 0 0 1-31-6 131 131 0 0 1-11-5c17 12 99 39 186-31 2-5 31-76-24-126z' fill='url(%23ff-j)'/%3E%3Cpath d='M148 277s12-41 80-41c7 0 28-20 29-26s-44 18-90-4c-51-24-89 4-89 4s15 35 57 35c-4 40 16 85 67 110l3 1c-29-15-54-44-57-79z' fill='url(%23ff-k)'/%3E%3Cpath d='M479 166c-11-25-32-52-49-60a249 249 0 0 1 25 73c-27-68-73-95-111-155a255 255 0 0 1-8-14 44 44 0 0 1-4-9 1 1 0 0 0 0-1 1 1 0 0 0-1 0c-60 35-81 101-83 134l9-1c45 0 84 25 105 62-13-9-36-18-58-14 86 43 63 192-57 186a107 107 0 0 1-31-6 131 131 0 0 1-11-5l-3-1 3 1c-29-15-54-44-57-79 0 0 12-41 80-41 7 0 28-20 29-26 0-2-42-19-58-35l-17-16a71 71 0 0 0-6-5 111 111 0 0 1-1-58c-25 11-44 29-58 44-9-12-9-52-8-60l-8 4a175 175 0 0 0-24 21 210 210 0 0 0-22 26 203 203 0 0 0-32 73l-1 2-2 15a279 279 0 0 0-4 34v1a240 240 0 0 0 477 40l1-9c5-41 0-84-15-121zm-24 13z' fill='url(%23ff-l)'/%3E%3C/svg%3E)
- ' xlink:href='%23s-b'%3E%3Cstop offset='0' stop-color='%2324a5f3' stop-opacity='0' /%3E%3Cstop offset='1' stop-color='%231e8ceb' /%3E%3C/radialGradient%3E%3CradialGradient id='s-j' cx='109.3' cy='13.8' r='93.1' gradientTransform='matrix(-.02 1.1 -1.04 -.02 137 -115)' xlink:href='%23s-b'%3E%3Cstop offset='0' stop-opacity='0' /%3E%3Cstop offset='1' stop-color='%235488d6' stop-opacity='0' /%3E%3Cstop offset='1' stop-color='%235d96eb' /%3E%3C/radialGradient%3E%3C/defs%3E%3Crect width='220' height='220' x='22' y='-107' fill='url(%23s-a)' ry='49' transform='matrix(.57 0 0 .57 187 256)' /%3E%3Cg transform='translate(194 190)'%3E%3Ccircle cx='67.8' cy='67.7' fill='url(%23s-c)' paint-order='stroke fill markers' r='54' /%3E%3Ccircle cx='-69.9' cy='69.3' fill='url(%23s-i)' transform='translate(138 -2)' r='54' /%3E%3C/g%3E%3Cellipse cx='120' cy='14.2' fill='url(%23s-j)' rx='93.1' ry='93.7' transform='matrix(.58 0 0 .58 192 250)' /%3E%3Cg transform='matrix(.58 0 0 .57 197 182)'%3E%3Cpath fill='%23cac7c8' d='M46 192h1l72-48-7-9-66 57Z' /%3E%3Cpath fill='%23fbfffc' d='M46 191v1l66-57-7-9-59 65Z' /%3E%3Cpath fill='url(%23s-d)' d='m119 144-7-9 66-57-59 66Z' /%3E%3Cpath fill='%23fb645c' d='m105 126 7 9 66-57-1-1-72 49Z' /%3E%3C/g%3E%3Cpath stroke='%23fff' stroke-linecap='round' stroke-miterlimit='1' stroke-width='1.3' d='m287 278 3-2m-12-17 8-2m-8-3h4m-4-13 8 2m-8 3h4m-1-13 7 3m-4-11 7 4m-2-11 6 6m0-12 6 7m1-11 4 6m4-10 3 7m5-9 2 7m15-7-1 7m10-5-3 7m11-4-4 7m11-2-5 6m16 7-7 4m10 4-7 3m10 6-8 1m8 16-8-2m5 10-7-3m4 11-7-4m2 11-6-5m0 11-5-6m-2 11-4-7m-4 11-3-8m-6 10-1-8m-16 8 2-8m-10 5 3-7m-11 4 4-7m-11 2 5-6m-8 3 3-3m4 8 2-3m5 8 2-4m6 7 1-4m8 5v-4m8 4v-4m9 3-1-4m9 1-2-4m9 0-2-4m9-2-3-3m8-4-3-2m8-5-4-2m7-6-4-1m5-8h-4m4-8h-4m3-9-4 1m1-9-4 2m-1-9-3 2m-2-9-3 3m-4-8-2 3m-5-8-2 4m-6-6-1 3m-8-5v4m-8-4v4m-9-2 1 3m-9 0 2 3m-9 1 2 3m-9 2 3 3m-8 4 3 2m-8 5 4 2m-7 6 4 1m-4 25 4-1m-2 5 7-3m-6 7 4-2m-2 6 7-4m-13-21h8m41-41v-8m0 99v-8m49-42h-8' transform='translate(-65 8)' /%3E%3C/svg%3E)
[Source](https://developer.mozilla.org/docs/Web/API/Window/queryLocalFonts)
### How to use the Local Font Access API
#### Feature detection
To check if the Local Font Access API is supported, use:
if ('queryLocalFonts' in window) {
// The Local Font Access API is supported
}
> [!NOTE]
> **Note:** The Local Font Access API is currently only available on desktop versions of Chromium, but not on mobile operating systems like Android or iOS.
#### Enumerating local fonts
To obtain a list of the locally installed fonts, you need to call `window.queryLocalFonts()`. The
first time, this will trigger a permission prompt, which the user can approve or deny. If the user
approves their local fonts to be queried, the browser will return an array with fonts data
that you can loop over. Each font is represented as a `FontData` object with the properties `family`
(for example, `"Comic Sans MS"`), `fullName` (for example, `"Comic Sans MS"`), `postscriptName` (for
example, `"ComicSansMS"`), and `style` (for example, `"Regular"`).
// Query for all available fonts and log metadata.
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);
}
If you are only interested in a subset of fonts, you can also filter them based on the PostScript
names by adding a `postscriptNames` parameter.
const availableFonts = await window.queryLocalFonts({
postscriptNames: ['Verdana', 'Verdana-Bold', 'Verdana-Italic'],
});
#### Accessing SFNT data
Full [SFNT](https://en.wikipedia.org/wiki/SFNT) access is available via the `blob()` method of the
`FontData` object. SFNT is a font file format which can contain other fonts, such as PostScript,
TrueType, OpenType, Web Open Font Format (WOFF) fonts and others.
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);
}
## Demo
You can see the Local Font Access API in action in the
[demo](https://googlechrome.github.io/samples/local-font-access/). Be sure to also check out the
[source code](https://github.com/GoogleChrome/samples/tree/gh-pages/local-font-access). The demo
showcases a custom element called [``](https://github.com/tomayac/font-select) that
implements a local font picker.
## Privacy considerations
The `"local-fonts"` permission appears to provide a highly fingerprintable surface. However,
browsers are free to return anything they like. For example, anonymity-focused browsers may choose
to only provide a set of default fonts built into the browser. Similarly, browsers are not required
to provide table data exactly as it appears on disk.
Wherever possible, the Local Font Access API is designed to only expose exactly the information
needed to enable the mentioned use cases. System APIs may produce a list of installed fonts not in a
random or a sorted order, but in the order of font installation. Returning exactly the list of
installed fonts given by such a system API can expose additional data that may be used for
fingerprinting, and use cases we want to enable are not assisted by retaining this ordering. As a
result, this API requires that the returned data be sorted before being returned.
## Security and permissions
The Chrome team has designed and implemented the Local Font Access API using the core principles
defined in [Controlling Access to Powerful Web Platform Features](https://chromium.googlesource.com/chromium/src/+/lkgr/docs/security/permissions-for-powerful-web-platform-features.md), including user
control, transparency, and ergonomics.
### User control
Access to a user's fonts is fully under their control and will not be allowed unless the
`"local-fonts"` permission, as listed in the
[permission registry](https://w3c.github.io/permissions/#permission-registry), is granted.
### Transparency
Whether a site has been granted access to the user's local fonts will be visible in the
[site information sheet](https://support.google.com/chrome/answer/114662?co=GENIE.Platform%3DDesktop).
### Permission persistence
The `"local-fonts"` permission will be persisted between page reloads. It can be revoked via the
*site information* sheet.
## Feedback
The Chrome team wants to hear about your experiences with the Local Font Access API.
### Tell us about the API design
Is there something about the API that does not work like you expected? Or are there missing methods
or properties that you need to implement your idea? Have a question or comment on the security
model? File a spec issue on the corresponding [GitHub repo](https://github.com/WICG/local-font-access/issues), or add your thoughts to an
existing issue.
### Report a problem with the implementation
Did you find a bug with Chrome's implementation? Or is the implementation different from the spec?
File a bug at [new.crbug.com](https://new.crbug.com). Be sure to include as much detail as you can,
simple instructions for reproducing, and enter `Blink>Storage>FontAccess` in the **Components** box.
### Show support for the API
Are you planning to use the Local Font Access API? Your public support helps the Chrome team to
prioritize features and shows other browser vendors how critical it is to support them.
Send a tweet to [@ChromiumDev](https://twitter.com/ChromiumDev) using the hashtag
[`#LocalFontAccess`](https://twitter.com/search?q=%23LocalFontAccess&src=typed_query&f=live) and let
us know where and how you're using it.
## Helpful links
- [Explainer](https://github.com/WICG/local-font-access)
- [Spec draft](https://wicg.github.io/local-font-access/)
- [Chromium bug for font enumeration](https://bugs.chromium.org/p/chromium/issues/detail?id=535764)
- [Chromium bug for font table access](https://crbug.com/982054)
- [ChromeStatus entry](https://chromestatus.com/feature/6234451761692672)
- [GitHub repo](https://github.com/WICG/local-font-access/issues)
- [TAG review](https://github.com/w3ctag/design-reviews/issues/399)
- [Mozilla standards position](https://github.com/mozilla/standards-positions/issues/401)
## Acknowledgements
The Local Font Access API spec was edited by
[Emil A. Eklund](https://www.linkedin.com/in/emilaeklund/),
[Alex Russell](https://infrequently.org/),
[Joshua Bell](https://www.linkedin.com/in/joshuaseanbell/), and
[Olivier Yiptong](https://github.com/oyiptong/). This article was reviewed by
[Joe Medley](https://github.com/jpmedley),
[Dominik Röttsches](https://fi.linkedin.com/in/dominik-r%C3%B6ttsches-7323684), and
[Olivier Yiptong](https://github.com/oyiptong/).