[css-fonts] Allow authors to redefine generic font families #10452
Description
Background
Most websites define their own typography, yet currently UI components have no access to it. In many cases using the inherited font-family is ok, but for others it’s not. Examples:
- Badges. A badge should never use serif text, yet a component using a badge may be used in a place where the inherited font is the serif one (e.g. if it’s used for body text.
- Monospace font, for code snippets, examples, etc.
We recently got access to the OS’s default font families (ui-*, system-ui) which provide far better alternatives than the generic counterparts, and are in very widespread use. However, web pages typically define their own sans, serif, monospace, etc. fonts, and any UI library or component used within the page should have access to these, not just the OS defaults.
This is part of a much broader problem around pages exposing their design tokens, but inspired from #9660 I figured maybe instead of trying to define a more general feature, paving the cowpaths and redefining some of the tokens that are already there may be the best course of action. As a bonus, this provides a nice fallback by default: if the page has not overridden these tokens, they simply have their default values.
Syntax
I imagine this would be part of the @font-face rule. However, simply allowing generic font families for the font-family descriptor is not a good solution. Authors typically want to link to their fonts normally, like:
@font-face {
font-family: Vollkorn;
src: url("fonts/Vollkorn/Vollkorn-VariableFont_wght.woff2") format("woff2");
font-weight: 400 900;
font-display: swap;
}
@font-face {
font-family: Inter;
src: url("fonts/Inter-upright-var.woff2") format("woff2");
font-weight: 100 900; /* stylelint-disable-line font-weight-notation */
font-style: normal;
font-display: swap;
}and then assign them to tokens as a separate step. Perhaps something like:
@font-face ui-serif {
font-family: Vollkorn;
}
@font-face ui-sans-serif {
font-family: Vollkorn;
}or:
@font-face {
src: resolve(Vollkorn);
font-family: ui-serif;
}
@font-face {
src: resolve(Inter);
font-family: ui-sans-serif;
}A nice-to-have would be to be able to specify multiple generic font-families, so that e.g. authors can alias sans-serif and ui-sans-serif to the same font-family. Perhaps allowing multiple names on font-family could address this and remove the need for a separate rule entirely:
@font-face {
font-family: Vollkorn, serif, ui-serif;
src: url("fonts/Vollkorn/Vollkorn-VariableFont_wght.woff2") format("woff2");
font-weight: 400 900;
font-display: swap;
}