demo · v139
Design System
Before v139 you'd repeat font-feature-settings on every h1, p, button, … because Chromium didn't honour it in @font-face. v139 finally does. Below: a typography system with three styled headings rendered both ways. With the descriptor, the brand's preferred stylistic alternates show up automatically anywhere the family is used.
stylesheet (the rule that decides)
rendered samples
Eight different gallons of straight whisky.
Lazy fox jumps over 1234567890.
Glossy magazines & tablet design.
the v139 rule
@font-face {
font-family: "BrandSans";
src: url("/fonts/Brand-Regular.woff2") format("woff2");
/* v139: baked into the family. No more per-element repetition. */
font-feature-settings: "ss01" on, "cv11" on, "calt" on;
}
/* Anywhere you use the family, the features are on. */
.headline { font-family: BrandSans; }
.body { font-family: BrandSans; }
.button { font-family: BrandSans; }