demo · v139

Font Alias Variants

Register the same typeface under multiple font-family names, each with a different font-feature-settings baked in. Components reference the alias (font-family: 'DisplaySmallCaps') rather than managing feature tags themselves — the baked-in settings follow the font wherever it goes.

Hello, World. Typography matters.
0123456789 — fi, fl, ff ligatures
font-family: DisplayDefault  ·  font-feature-settings: normal

Descriptor contract lab

Pre-v139 Chromium ignored font-feature-settings inside @font-face, so every component repeated the same feature tags. This lab parses the selected alias as a real CSSFontFaceRule, then shows how valid, normal, disabled, and malformed descriptor values survive or get dropped.

CSSOM rule

checking

The exact CSSOM type for @font-face rules.

Parsed descriptor

checking

Valid four-character OpenType tags should remain attached to the rule.

Edge branch

checking

Malformed descriptor values should be rejected rather than silently applied.

All variants side by side

Default
Hello, World 0123
font-feature-settings: normal
Small Caps
Hello, World 0123
font-feature-settings: "smcp" 1, "c2sc" 1
Lining Numerals
Hello, World 0123
font-feature-settings: "lnum" 1
Oldstyle Numerals
Hello, World 0123
font-feature-settings: "onum" 1
Combined
Hello, World 0123
smcp + lnum + kern + liga
/* Register the same typeface under different names,
   each with different font-feature-settings baked in. */
@font-face {
  font-family: 'DisplayDefault';
  src: local('Georgia');
  font-feature-settings: normal;
}
@font-face {
  font-family: 'DisplaySmallCaps';
  src: local('Georgia');
  font-feature-settings: "smcp" 1, "c2sc" 1;
}

/* Components reference the alias — no per-element feature tags needed */
.heading { font-family: 'DisplaySmallCaps'; }
.body    { font-family: 'DisplayDefault'; }
.price   { font-family: 'DisplayLining'; }

see also