Remove System UI font stack

[toastal]

Users have the ability to set their preferred serif & sans-serif font in the user agent. For instance, in Firefox this at about:preferences#general under the Fonts section. Additionally, most OSs allow users to set their preferred fonts stacks as well. On my system I have set my default serif, sans serif, & monospace fonts via fontconfig.

Why does this cause a problem? If the goal of the system font is to use whatever the user agent or OS’s default font (sans-serif or otherwise), the injected font stack will get in the way if there is a match. If a user installed the Roboto & Ubuntu fonts for design work, that doesn’t determine that they want that as a default but this stack will force it upon them.

Suggested fix: revert #182 removing the stack entirely & just let it fall to the user agent to decide. No need to be clever or try to guess for the user.

[silverwind]

Agree, https://github.com/parcel-bundler/lightningcss/pull/182 seems a far too opinionated rewrite to do, just let the browser resolve system-ui themselves, that is the whole point of this font.

[devongovett]

Hmm, I think postcss-preset-env does exactly the same thing so this is very widespread.

Users have the ability to set their preferred serif & sans-serif font in the user agent.

This is different from what system-ui is supposed to do. sans-serif is indeed the default sans serif font chosen by the browser, but system-ui is not affected by browser level settings. It is supposed to be the default operating system font.

Regardless, this is just a fallback in case the system-ui font is not supported. At this point, it is very widely supported across browsers so the fallbacks should be harmless.

[toastal]

Widespread doesn’t mean it’s a best practice. I still see a lot of broken icon fonts because folks aren’t using SVGs, websites add target=_blank removing my ability to open in the same tab, dialogs that don’t support Esc to exit, etc.

I set my browserslist to something fairly conservative since there’s usually not too much of a downside—but this means if I add a browser without support such as IE11, KaiOS etc. will get the font stack I’m objecting to.

If the support is good, then I think the harm is adding the additional bytes of this font stack that isn’t used + the case checking in the code for it. When not supported, maybe I don’t want Ubuntu as a fallback instead of my preferred font. There’s also still space for other browsers tho, like Ladybird, Netsurf, Dillo, or anyone new that doesn’t support the full set of CSS features where falling back to the UA is still a better, lighter experience (IMO).

…But I have to admit I’m mixing up a couple of broader concerns here.