[css-fonts] is it allowed for generic families like system-ui to be overridden by @font-face?

[fireattack]

@kojiishi and I had a discussion about this topic in https://crbug.com/1021568.

The core question is, should the following css rule

@font-face {
    font-family: system-ui;
    src: local("Arial");
}

override the generic font family of system-ui with Arial?

I've read chapters about generic font families and font-face multiple times, but can't get a clear answer.

Thanks!

[tabatkins]

No, it can't. See https://drafts.csswg.org/css-fonts-4/#family-name-syntax for the details - that @font-face is totally valid, and font-family: "system-ui"; will select it, but font-family: system-ui; will only select the generic family; the generic keywords do not match the <family-name> production that looks for local/web fonts.

[fireattack]

@tabatkins

I understand that if you want to refer to a font that just happens to have the same name of generic-family keywords, you should use double quotes to distinguish.

But the question is more about are you able to (deliberately) override generic families?

Thanks.

[tabatkins]

No, sorry, I was referring to the property, like h1 { font-family: system-ui; }.

In the @font-face 'font-family' declaration, it doesn't matter whether it's quoted or not; they do exactly the same thing. But in the property on an element, keywords always refer to the generic family, and strings always refer to the webfont.

[fireattack]

Thanks for cleaning that part up, but the question remains:

Should you be able to (deliberately) override generic family keywords using @font-face? This is the part that I feel is not clear in the draft.

---

Consider the following use case:

Remote (website) delivers a "bad font" in CSS rule property: h1 { font-family: "badFont"; }. Users can override it locally with

@font-face {
    font-family: badFont;
    src: local("goodFont");
}

Now, if the remote delivers system-ui h1 { font-family: system-ui; }. but it's undesirable (#3658), the user now have no way to override that.

Note: I'm not trying to ask we change the spec to help on that, simply that the spec currently reads to me that is not disallowed to override generic keywords.

if someone can help directly quote the sentence(s) in spec that says or implies "generic keywords can't be overridden", it would clear up the whole thing.

[fantasai]

Should you be able to (deliberately) override generic family keywords using @font-face?

No

This is the part that I feel is not clear in the draft.

The @font-face font-family descriptor defines a “font family name” see https://www.w3.org/TR/css-fonts-3/#font-family-desc . The font-family property can select either font family names or generic family keywords, as define din https://www.w3.org/TR/css-fonts-3/#font-family-prop . Font family names are selected using the <family-name> part of the font-family property, not the <generic-family> part, which selects generic family keywords.

The font-family property is clear that any unquoted ident matching a <generic-family> keyword represents that generic family, not a font family name. The fact that <family-name> strings can be unquoted is a historical artifact, they are fundamentally strings as noted in the Computed value line.

Consider the following use case:

Some UAs (e.g. Firefox) allow the user to choose what font maps to the generic keywords. If you want that functionality in your UA and it doesn't provide it, file a bug.

[tabatkins]

From the spec chapter I linked to in my original comment:

Any identifier which could be misinterpreted as a pre-defined keyword in the font-family value definition, or the CSS-wide keyword values, is not allowed.

Note: this means that if you really have a font whose name is the same as one of the names, or the common-keywords|CSS-wide keyword values, it must be quoted.

This text is very clear that if you say h1 { font-family: system-ui; }, you will always get the browser built-in font, not a webfont. The only way to access a @font-face { font-family: system-ui; ... } is by writing h1 { font-family: "system-ui"; }. (And font-family: "system-ui"; should never select the browser built-in, even if there's no webfont defined for that name.)

[fireattack]

Thanks for the replies, you two are very helpful. I think now I understand.

@fantasai

Some UAs (e.g. Firefox) allow the user to choose what font maps to the generic

The mapping in Firefox is kind of tricky (for example, kanas in mixed content with locale of en will be mapped to Chinese fonts if Chinese has higher priority than Japanese, instead of always using Japanese fonts), but I will leave this topic somewhere else. I do agree it's more controllable than Chrome in some cases.