Found myself wanting to use this awesome stuff in a little project I am using TailwindCSS with.
So I quickly put this together:
https://github.com/BorisAnthony/mfs-tailwind
In case anyone else wants/needs it.
(Feedback welcome. Just started with TW so may have not done it the best way or something…)
Thank you in any case. Very handy!

...when you're red-green color blind.

For example strike through would make Unavailable clearly different, kind of similar to underlining on the "Currently In Use" variant. Maybe little extreme though.

Microsoft have decided on a new default Office font: Aptos.

It's probably safe to say this will be on many Windows machines in the near future (kind of like Arial Nova). The designer describes it as a Grotesque Sans Serif, and I think it would work well there or in the Geometric Humanist category, but you have a better eye for categorization than me.

I'm happy to open a PR when the font releases, but I won't be able to generate the reference images.

Also, it looks like Aptos Serif is in the works as well (farther down the same blog post).

site is down for me. HTTP 500.

I'm sorry if I'm misguided, but many fonts mentioned in your web site are not shown in the preview article, nor in the rest of the web site. Many of those fonts are already installed in my system, I use them in projects, etc.

However, your site shows (underlined fonts) that the current font that's in use are the very basic font of each category: san-serif, monospace, serif.

So maybe I don't get it, or something is wrong.

the current font stack does not address iOS.
perhaps it would be prudent to clarify that the sans-serif fallback resolves to San Francisco (and that San Francisco fits the font-stack)?

I wonder if it would be useful to order the fonts in a consistent way, perhaps by operating system market share.

For example, Android is the most common OS, so put Android-targeting fonts first. I think this would make it clear which fonts are most-likely to be used when styling with a particular stack. I don't think it'll have any meaningful performance impacts.

Happy to do a PR if I can help! Just a thought. Love the project very much!

What does "Currently In Use / Available / Unavailable" each mean?
My first instinct was to hover over each item for an explanation, but I didn't see any.

This looks like a great resource. However, previous incarnations of font stacks gave statistics as to how common each font might be on each platform. In other words, what the likeliest font would be on each platform, %-wise, and how it would appear. Any chance you could add something like that?

Currently Mac is selecting 'DIN Alternate' when viewed on MacOS 13.2.1. This font doesn't have additional font weights. Is there an equivalent that can be used instead?

PS Thanks for putting this site together, the more designed focused members of our team are excited to have more font option to choose from.

Originally mentioned here and something that slightly confused me was the significance of the colours/formatting - until you reach the bottom of the page, the key isn't visible. It would probably be s good idea to put it above the font collection.

(Very handy site, by the way :3)

Hi,

I love the motivation behind this project but I see several outstanding issues:

• Cloud fonts in Office such as Avenir Next LT Pro are only installed to the local application data store and are not exposed to the OS.
• Windows' Pan-European Supplemental Fonts such as Gill Sans Nova must be manually installed (no automatic language associations) [1].
• Arial Rounded MT Bold is not a recognized family name under Windows platform Chromium installs.
• fonts-comfortaa is only available in 4247, fonts-smc-chilanka and fonts-smc-manjari in 547, and fonts-taml-tscu in 59 out of 78246 fontconfig installs on Debian GNU/Linux stable per popcon [2].
• Bitstream Charter is a Type 1 font provided by the texlive-fonts-recommended package, available in 8647 out of 78246 installs, and Montserrat is provided by the texlive-fonts-extra package, available in 4212 out of 78246 fontconfig installs on Debian GNU/Linux stable. (I am not even sure if texmf-dist fonts are exposed to the OS?)
• Android is supported at surface level. Cutive Mono, Roboto and others are not recognized family names. Android platform family names and aliases are not included (see [3]).
• ChromeOS is not supported (see [4]).

This is not a comprehensive list but I hope it gets the ball rolling for a project revision.

Thanks.

[1] https://learn.microsoft.com/en-us/globalization/input/font-support
[2] https://popcon.debian.org/stable/main/by_vote
[3] https://android.googlesource.com/platform/frameworks/base/+/refs/heads/android13-release/data/fonts/fonts.xml
[4] https://chromium.googlesource.com/chromiumos/overlays/chromiumos-overlay/+/refs/heads/release-R113-15393.B/media-fonts/

In the README, there is a note about emoji support.

Level 4 of the CSS Fonts module defines an "emoji" generic font-family¹. I don't know how well OS's support it. It would be interesting to see if that could replace the current font-stack.

html {
    font-family: system-ui, emoji;
}

Most of proposed fonts are not available on Android, so most of the time, the default serif is used.

Hi Dan,

Thanks for this great tool! 🥇
I was surprised to see (after Chris Ferdinandi sharing this) what is possible with system fonts. I will definitely fresh up my website with one of these font stacks.

I wanted to let you know that I created this WordPress plugin to enable adding these font stacks to WordPress and choosing them easily in the Site Editor (see screenshot in the repo). And using them more widely, without additional load to the website! 💯

I hope you like it.

I suppose this is an issue this project can't fix.

With "Enhanced Tracking Protection" on Firefox blocks certain fonts. e.g. on macOS for the "Humanist" stack:
Request for font "Seravek" blocked at visibility level 2 (requires 3)

FF blocks this because of a potential "suspected fingerprinter". And sure - if your machine contains Seravek it is bound to be a mac. I hope they will refine this check in the future so your page is not being mangled.

See: yokoffing/Betterfox#261

For backwards compatibility on macOS and iOS browsers, it probably wouldn't hurt to add -apple-system and BlinkMacSystemFont to the system UI stack.

References:
https://css-tricks.com/snippets/css/system-font-stack/
https://caniuse.com/font-family-system-ui

For some users, such as coders, a key criterion for using a font is how it ensures that zeroes are not mistaken for letter 'O's. It would be great if the images of the font stacks included zero: 0123456789 instead of 123456789. Thanks!