Use system-native font stack

[silverwind]

Webfonts in general bring the issue that the page can not render completely without the font download finishing, which gives us one of the following issues:

• flash of invisible text (FOIT) which makes the browser render a invisible font until the download is done (equivalent to font-display: block and default behaviour in most browsers)
• flash of unstyled text (FOUT) which make the browser render a system font and then replace it with the downloaded font (equivalent to font-display: swap)

Both are bad in their own ways and I think we should eliminate all web fonts and just use a sytem-native font stack. This would match us with GitHub and GitLab which both also use native font stacks and do not rely on any web fonts.

GitHub has:

font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji;

GitLab has:

font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans", Ubuntu, Cantarell, "Helvetica Neue", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";

[mrsdizzie]

Could we do this now that 1.12 is released?

[silverwind]

Yes, I plan to rework fonts. The only possible remaining font should be the emoji fallback, but it's kind of questionable benefit as it only really supports Chrome on Linux (Other OS do ship emoji fonts and Firefox can't parse the ttf file because a bug on their end last I checked).

[andreymal]

This is NOT system-native!

I have Segoe UI installed on my Arch Linux, but my system-native font is actually Ubuntu. This CSS will override system configuration and use Segoe UI instead of real system-native font.

The real system-native font stack will be enabled only if you will use font-family: sans-serif.

Also, issues mentioned here are relevant only at the first visit to website while the webfonts are not yet cached, so this is very minor and it would be best to get the Lato font back.

Also×2, "system-native" fonts often break website designs, so I don’t understand this hype. All websites that switched to "system-native" fonts began to look worse and less consistent for me.

P.S. font-family: system-ui is not yet working in Firefox, and this still overrides browser-level configuration in Chrome

[silverwind]

This CSS will override system configuration and use Segoe UI instead of real system-native font.

Those font stacks are quite intricate. What is the "native" sans-serif font of Ubuntu? I'm happy to put it before Segeo UI as it's like never present on Windows. Also, you're seeing Segeo UI on GitHub, right?

Also, issues mentioned here are relevant only at the first visit to website while the webfonts are not yet cached

It's certainly an issue in some browsers (Firefox) that flash a different font on every page load and then replace it with the webfont, even if that webfont is in the cache. Also, system fonts are highly likely to contain many more language glyphs which can not be said from webfonts.

[andreymal]

What is the "native" sans-serif font

It is a font I selected in settings of my desktop environment or in browser settings (every browser allows to configure fonts). It can be any font.

Also, you're seeing Segeo UI on GitHub, right?

Yes

system fonts are highly likely to contain many more language glyphs

It seems this is the only real reason to use "system-native" fonts (okay, probably I got excited with "would be best to get the Lato font back" :).

Although this font-family is still not system-native, as I said earlier

[silverwind]

I'm certainly not against trying to utilize system's sans-serif but I guess there must be a reason why most recommendations have it last.