1226042 - add support for the new 'system-ui' generic font family

Status: NEW

(Core :: CSS Parsing and Computation, defect)

Description

[John Daggett (:jtd)]

The CSSWG resolved today to add a new generic font family name, 'system-ui', that maps to the default system UI font. 

https://logs.csswg.org/irc.w3.org/css/2015-11-18/#e621666

This will be specified in the CSS4 Fonts spec.

Three components to this:

- parsing and handling of the new generic in CSS code
- platform-specific lookup, lang dependent
- appropriate handling of things like fallback

The last item is probably the trickiest. Under OSX, the "system" font is always a Latin font, e.g. San Francisco or Helvetica Neue, but it's linked to a specific set of fallback font families, so that the Latin font is used for Latin glyphs and a system Japanese font is used for Japanese. Need to research what happens precisely under Windows (i.e. always Meiryo UI or only for CJK characters?).

Comment 1

[yisibl]

Chrome: Intent to Implement and Ship: The “system-ui” generic font family

https://groups.google.com/a/chromium.org/forum/#!topic/blink-dev/hvN9YVvIb5c

Comment 2

[j.j.]

Chrome shipped font-family:system-ui in version 56 some month ago.
Safari fixed in 2017-02: https://bugs.webkit.org/show_bug.cgi?id=151493

Chrome status entry says Firefox shipped also ...
https://www.chromestatus.com/feature/5640395337760768

Comment 3

[Cameron McCormack (:heycam)]

(In reply to j.j. from comment #2)
> Chrome status entry says Firefox shipped also ...
> https://www.chromestatus.com/feature/5640395337760768

That seems wrong.  I'll email Koji.

Comment 4

[Florens Verschelde :fvsch]

Would be interested in this for DevTools. We use Firefox-only things like font:message-box, which has the downside of a) resetting the font-size and b) resetting it to different values depending on the platform.

(Some tools such as debugger-html and perf-html are also used outside of Firefox, so a standard solution would be best.)

Comment 5

[Jonathan Kingston [:jkt]]

Should this block the result of https://github.com/w3c/csswg-drafts/issues/1586 it would be nice to not expose to the webside what the chosen system font is.

Comment 6

[Thomas Wisniewski [:twisniewski]]

Note that coda.io uses this on their page, which causes Firefox to select Arial on Windows 10 where Chrome selects Segoe UI. This doesn't seem to break anything in their layout, but it's still an interop difference worth noting.

Comment 7

[Andy Grover [:grover]]

Is this implemented and done? Looking at twitter.com in the inspector, it looks like the font chosen is "system-ui" in FF 70. (Only seems to be used if I'm logged in to twitter and using the new UI.)

Comment 8

[Andy Grover [:grover]]

Attachment: Screenshot from 2019-10-29 13-18-47.png

shows system-ui as underlined

Comment 9

[Jonathan Kingston [:jkt]]

:grover I have seen that before, I think this is a devtools issue with how they select what is underlined for native fonts.

Comment 10

[andrej]

The implementation is definitely buggy. The selected font is Cantarell. I'm on Linux, KDE, with Noto Sans as default font. I don't even know how Cantarell ended up on my system. Could be through a Lutris/Wine package.

Chromium defaults to Noto as expected. How FF sniffs out Cantarell is beyond me. I tried grep-ing through my ~/.config and got nothing of relevance. Rather than system-ui resolving incorrectly, I'd prefer it failed and skipped to the second entry in the font stack.

Tl;dr this resolves into Cantarell being used which is not my configured system font:
font-family: system-ui, "Noto Sans", "Helvetica Neue", Arial, sans-serif;

FF: 70.0.1
Linux/KDE all pretty much latest because it's Arch.

Comment 11

[Jonathan Kew (:jfkthame)]

(In reply to Jonathan Kingston [:jkt] from comment #9)

:grover I have seen that before, I think this is a devtools issue with how they select what is underlined for native fonts.

Right, that's bug 1545745. Firefox does not currently support system-ui at all.

Comment 12

[ebrahim]

While implementing this be ware to retrieve 'system-ui' per language/script not once for entire scripts, for example on macOS San Francisco is the Latin font for system-ui but .Arabic UI Text is for Arabic scripts, Safari is OK on this regard, filed the issue against Chrome's current system-ui support https://crbug.com/1036695 so, just make sure data:text/html;charset=utf8,<div lang="ar" style="font-family: system-ui, arial; font-size: 300%;">%D8%B3%D9%84%D8%A7%D9%85! renders exactly similar with Safari if a correct implementation is considered.