>Everything else is less user friendly.

Not really.

By using a font like Inter UI you create the same experience for everybody, regardless of the platform.

Segoe UI, Ubuntu, Cantarell (Windows, Ubuntu, Gnome/Fedora) are within a different typographic category than San Francisco or Roboto, they're not even similar enough to each other. By using the system font stack you're basically fragmenting the user experience and look and feel.

Inter is a substitute for well crafted neo grotesque fonts loved by designers, like San Francisco (which itself is a better fitting alternative to Helvetica), it's of a similar quality.

Agreed. Few designs benefit enough from a custom font to justify the downsides of not using the standard system font.

As an aside, we will soon be able to use system-ui in place of a manually constructed font stack: https://caniuse.com/#feat=font-family-system-ui

What are the downsides, load time aside?

Besides just the load time, there’s the “pop” effect of the text not being visible until the font loads (or slightly better but still not great, the page shifting around as default fonts get subbed out for your custom font with different metrics).

On macOS and iOS specifically, the system font (San Francisco) has had a great deal of time and effort poured into readability — so much that rather than being a singular font, it’s a massive family of fonts or metafont with countless variants for various DPIs and use cases. For example, the “San Francisco” used for headings (h1, h2, etc) uses wider glyphs and more relaxed kerning, as is appropriate for headings and the “San Francisco” used for small text uses a variant that has its geometry tweaked to be more legible. It’s a free readability boost that all happens automatically when you use system-ui or -apple-system in your font stack. By using a custom font, you forfeit all of that.

The pop effect can be tamed with, for example, font-display: optional;, which allows the first page load to use the fallback fonts.

This one includes a few more devices:

font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif

What about Noto?

Might want to throw a “system-ui” in there too, from CSS 4. This works for me in Safari sand Chrome.

Yes, system-ui is how the system font is specified in modern browsers: https://www.w3.org/TR/css-fonts-4/#valdef-font-family-system...

I wonder why they didn't just change the browser default? Seems odd that it's still Times New Roman.

Firefox bug for this:

https://bugzilla.mozilla.org/show_bug.cgi?id=1226042

Can't one just use font:menu?

Isn’t sans-serif a catchall which means the emoji fonts will never be used?

The list has two purposes: fallback in case a particular font doesn't exist on the client, and fallback in case a particular glyph doesn't exist in the font. When you use emoji that aren't in the sans-serif font, it'll fall back to the listed emoji fonts for that individual glyph.

I'm sorry but have you considered that there are people who don't actually own a Mac?

As I see it, this is very centric to a specific system and therefore does not offer the best user experience for everyone.

Arial (and Segoe UI now) should be readily available to windows users, and sans-serif should cover the rest I think.

fair, I mixed that up.