3 ms·

I think you’re misinterpreting what’s going on here. That looks like a backwards compatibility replacement for the standard font-family: system-ui; CSS rule. Th

I think you’re misinterpreting what’s going on here. That looks like a backwards compatibility replacement for the standard font-family: system-ui; CSS rule. They aren’t trying to force you to view Roboto. They are trying to tell the web browser to use the standard font for the platform. -apple-system will give San Francisco on Apple systems. BlinkMacSystemFont will do the same in Chrome. Roboto is the Android default font. And so on. Since most people don’t typically have the default system font for other platforms installed, a rule like this will typically give the same font that is used everywhere else in the platform. Web browsers don’t typically use the standard font for the platform for backwards compatibility reasons, which is why system-ui was created. Older browsers don’t support system-ui, so tools like PostCSS will often replace it with a stack like this in an attempt to get the same behaviour in older browsers. This basically boils down to somebody saying “let’s use the standard font for the platform the user is using”.

dspillett 3y ago
> This basically boils down to somebody saying “let’s use the standard font for the platform the user is using”. Exactly. This is what system-ui should be but some browsers instead default to something else, perhaps in a misguided effort to make their UA look consistent between platforms, to many use a font-list like the above to try enforce what system-ui should be. Unfortunately it falls apart if the user has fonts for other systems installed (perhaps for compatibility with others they collaborate with on documents, or to be able to view HTML more exactly as those users will see it) and those users get someone else's system font instead because it is ahead of thiers in the list.
- toastal 3y ago
  It’s a weird game of whack-a-mole where it solves a problem for some while creating new problems for others. That’s why it’s best to just save the bits & ask the UA.

dspillett 3y ago

> This basically boils down to somebody saying “let’s use the standard font for the platform the user is using”. Exactly. This is what system-ui should be but some browsers instead default to something else, perhaps in a misguided effort to make their UA look consistent between platforms, to many use a font-list like the above to try enforce what system-ui should be. Unfortunately it falls apart if the user has fonts for other systems installed (perhaps for compatibility with others they collaborate with on documents, or to be able to view HTML more exactly as those users will see it) and those users get someone else's system font instead because it is ahead of thiers in the list.

toastal 3y ago
It’s a weird game of whack-a-mole where it solves a problem for some while creating new problems for others. That’s why it’s best to just save the bits & ask the UA.