demo · v143

Glyph variant explorer

A grid view of font-language-override behaviour across OpenType locl-aware language tags. Type a phrase, pick a font, and watch the same Unicode sequence render differently as the page swaps the override between Polish, German, Dutch, Turkish, Bulgarian Cyrillic, Catalan, and the special "DFLT".

Live

HTML lang attribute (browser-managed)

aćńść — ija — fi — İıİİİİ

CSS font-language-override (explicit)

aćńść — ija — fi — İıİİİİ

Side-by-side matrix

All seven overrides applied to the same string, same font. Look for: Polish accents (ćńś), Bulgarian Cyrillic shapes, Turkish dotted I, Dutch ij.

How it works

  1. Most fonts ship per-language glyph variants under the OpenType locl feature.
  2. The browser usually picks the override from the closest lang attribute up the tree.
  3. font-language-override forces the picked OpenType tag, ignoring lang. Use it when CMS content can't be reliably tagged.
  4. "DFLT" is the OpenType-standard "no language override" tag — useful for re-enabling the default shape on a leaf node that inherits a specific override.
:lang(pl)         { font-language-override: "PLK "; }    /* explicit */
.brand-name        { font-language-override: "DFLT"; }    /* opt-out */
.address-bg        { font-language-override: "BGR "; }    /* CMS data without lang= */

see also