# Which local fonts can I use?

I've been asking myself this question and I wish a place like caniuse.com contained this information. I couldn't find one so I'm setting out to build it.

## Once more: font vs family

Check out the [Font Jargon](https://highperformancewebfonts.com/read/font-jargon) article for all the details, but to recap quickly, the question I ask is about *fonts* not *font families*, in other words font names I can put in `src: local('XXX')` rather than in `font-family: XXX`.


## Some official docs

Here's a list of official resources I found while researching this topic. They are interesting but ultimately cannot be trusted. (Why? Answer after the list.)

* [macOS Sequoia](https://support.apple.com/en-us/120414)
* [macOS Sonoma](https://support.apple.com/en-us/108939)
* [macOS Ventura](https://support.apple.com/en-us/103197)
* [macOS Monterey](https://support.apple.com/en-sg/103203)
* [macOS Big Sur](https://support.apple.com/en-in/101430)
* [macOS Catalina](https://support.apple.com/en-us/101429)
* [macOS Mojave](https://support.apple.com/en-us/101177 )
* [macOS High Sierra](https://support.apple.com/en-us/101178)
* [macOS Sierra](https://support.apple.com/en-us/101179)
* [Windows 11](https://learn.microsoft.com/en-us/typography/fonts/windows_11_font_list)
* [Windows 10](https://learn.microsoft.com/en-us/typography/fonts/windows_10_font_list)
* [Windows 8.1](https://learn.microsoft.com/en-us/typography/fonts/windows_81_font_list)
* [Windows 8](https://learn.microsoft.com/en-us/typography/fonts/windows_8_font_list)
* [Windows 7](https://learn.microsoft.com/en-us/typography/fonts/windows_7_font_list)

### Why I cannot trust the Mac OS lists? 

Some lists may be fine, but the most recent for example, Sequoia, contains "Installed or downloadable fonts". At some point Apple's articles switched from separate lists for "installed" vs "downloadable". *Downloadable* are fonts that appear grey in Font Book and the users can install by clicking them. Needless to say most users don't know what a Font Book app is, let alone install fonts. So these cannot be relied upon to be available.

![Font book](/i/posts/mukta.png)


### Why I cannot trust the Windows lists? 

I looked at the Windows 11 list, note the font Bahnschrift

![Windows bahnschrift.ttf](/i/posts/bahnschrift.png)

Then I inspected the local fonts using `queryLocalFonts()` in Chrome and found:

* Bahnschrift
* Bahnschrift Bold
* Bahnschrift Bold Condensed
* Bahnschrift Bold SemiCondensed
* (... and more)

This means more local fonts are available than Microsoft claims.

Is it just the whole font vs family again? Hmm, no, because the same page lists a bunch of Arials and they match my `queryLocalFonts()` results perfectly.

## Field data FTW

Since..

* the official data cannot be trusted and 
* there are more OSes than these 2

... I believe the truth shall be found by inspecting real OSes "in the wild" and checking their available fonts.

To do this, we can use `queryLocalFonts()`, except it only works in Chrome-y browsers and only on Windows and Mac (not sure about Linux) and not on any mobile devices. So `queryLocalFonts()` can be the first step.

The second step will be the old bruteforce: take the master list of all font names collected in step 1 and [check](https://highperformancewebfonts.com/read/testing-for-locally-installed-fonts) using `FontFace()` if they are available in the OS being inspected, e.g. iOS, which doesn't support `queryLocalFonts()`.

## Step 1

To get started I created a small app to start collecting data points for various operating systems. The app is reachable at:

[https://fontes-locais.vercel.app/](https://fontes-locais.vercel.app/)

(*Fontes locais* means "local fonts" in Portuguese, at least I hope so)

The data collected with this app is written to the app's repo in the `/data` directory: 

[https://github.com/stoyan/fontes-locais/tree/main/data](https://github.com/stoyan/fontes-locais/tree/main/data)


## How can you help?

Using Chrome go to [https://fontes-locais.vercel.app/](https://fontes-locais.vercel.app/) in as many (Mac, Windows and please try Linux) OSes as you can, follow the instructions and send the data to be written in Github. 

Join to help the effort.

## Step 2

To be continued...<i class="circle"><s></s></i>