font-family keywords

[o-t-w]

Description

Support for specifying a CSS font-family using keywords is inconsistent between browsers. Safari support system-ui, ui-serif, ui-sans-serif, ui-monospace, and ui-rounded. Other browsers only support system-ui.

Support for font-family: emoji is currently not supported by any browser. Developers have to list out the various system emoji fonts:

 font-family: "Twemoji Mozilla", Apple Color Emoji, "Segoe UI Emoji", "Noto Color Emoji", "EmojiOne Color";

Having access to the high-quality fonts available on a users system helps performance as they can be used instead of an @font-face request.
In HTML email, where custom fonts are not supported by many email clients, having access to a wider range of fonts would be highly desirable.

Specification

https://drafts.csswg.org/css-fonts-4/#ui-serif-def

Open Issues

No response

Tests

https://wpt.fyi/results/css/css-fonts?label=master&label=experimental&aligned&q=system

Current Implementations

• [ ] Blink
• [ ] Gecko
• [X] WebKit

Standards Positions

No response

Browser bug reports

Chromium bug for font-family: emoji Broader Chromium bug Gecko bug for ui-serif Gecko bug for ui-monospace

Developer discussions

No response

Polls & Surveys

No response

Existing Usage

No response

Workarounds

No response

Accessibility Impact

No response

Privacy Impact

No response

Other

No response

[svgeesus]

Related:

• https://github.com/w3c/csswg-drafts/issues/9292
• https://github.com/w3c/csswg-drafts/issues/9407

both of which are trying to clarify, and thus improve interop, on system font families and the newer generic font families

[svgeesus]

Current WPT tests for system fonts

Only system-ui is really tested. The CSS Fonts 4 spec also notes

ui-serif is not expected to map to any font on platforms without an appropriate system font.

which makes creating a reftest harder

[drott]

Didn't we say somewhere that the emoji font family keyword is somewhat deprecated now that there is font-variant-emoji to express preference for a presentation style?

ui-serif, ui-monospace, and ui-rounded are somewhat Mac OS specific and are not very well interopable across platforms. That said, on Mac OS they can be supported, but I wonder to what extent they are well defined for the web.

[drott]

CC @kojiishi

[drott]

Current WPT tests for system fonts

From the filtered list that @svgeesus mentioned, from the Chrome side, we're kinda disputing whether the Arabic vs. Urdu and Chinese vs. Japanese system font tests are valid. We need spec clarification on whether the language attribute should be taken into account. Filed as https://github.com/w3c/csswg-drafts/issues/9518

[svgeesus]

Didn't we say somewhere that the emoji font family keyword is somewhat deprecated now that there is font-variant-emoji to express preference for a presentation style?

Not yet but that does seem to be the general opinion so far

• https://github.com/w3c/csswg-drafts/issues/9359

  On agenda, no resolution yet, good to hear back from implementers

[dandclark]

Thank you for proposing font-family keywords for inclusion in Interop 2024.

We wanted to let you know that this proposal was not selected to be part of Interop this year.

This is because we got many more proposals than we could include in this year's project. Note that individual vendors may nevertheless choose to advance work in this area during the forthcoming year. We would welcome this proposal being resubmitted again next year if necessary.

For an overview of our process, see proposal selection. Thank you again for contributing to Interop 2024!

Posted on behalf of the Interop team.