I’m stuck trying to get a list of fonts available in the current browser.
Googling it to no avail.
Found something that retrieves /assets/system_fonts/mac_fonts.json.
How do I best get at that?
I don’t believe there’s a standard API for this because listing the available system fonts is a way to fingerprint the browser and uniquely identify the user. There are some hacky ways to work around this, say by iterating over a set of known fonts, rendering it to Canvas, and checking the pixels. But probably best avoided.
What do you want the list of available fonts for? If you don’t want to rely on a specific system font, and you don’t want to load a web font, the typical solution is to specify a set of fallback fonts and let the browser decide what to use (without you explicitly checking). For example, Observable’s sans-serif font is:
font-family: -apple-system,BlinkMacSystemFont,"avenir next",avenir,helvetica,"helvetica neue",ubuntu,roboto,noto,"segoe ui",arial,sans-serif;
Hi Mike, thanks for your reply.
I simply want to have the user select any available browser font to play around with some attributes, just like in Font Picker « Martien.
https://wordmark.it seems to be able to do this.
I also want to see which fonts I can best pick that give satisfying results across browsers and devices. E.g. I find that locally installed fonts on my iMac do show up in Firefox and Chrome, yet not on Safari.
I am aware of not relying on specific system fonts and using a fallback font list (in css). Fingerprinting browsers to uniquely intensifying the user hasn’t occurred to me. Learnt something new.
wordmark.it does not detect fonts for me, but it appears to use Adobe Flash which I have disabled. Probably your best bet is to use a hard-coded list of fonts like you do in your Font Picker notebook.
Hmmm… didn’t see that. Well thanks anyway. A fixed list it will be.
As always, 
for the amazing work (and world) of you and your team. I see that you are expanding in SFO. What would be baseline requirements to do remote work for Observable?
1 Like
For reference, Figma asks you to install a native app to let it access local fonts. Also, Safari has stopped rendering custom local fonts even if you ask for them by name for privacy reasons.
1 Like
Thanks.
True that Safari will not access local fonts. Chrome and Firefox don’t see that as a privacy concern apparently. To me it’s somewhat unclear as well as disappointing.