How to Inspect CSS font-language-override in Safari Web Inspector

Multilingual digital typography requires careful handling of language-specific glyph alternates and punctuation conventions. In Turkish and Azerbaijani typography, the lowercase letter “i” has a dot (“i”), and its capital counterpart also carries a dot (“İ”), while the dotless “ı” capitalizes to standard “I”. In Dutch typography, the “ij” digraph forms an inseparable typographic unit with bespoke accent placement. While browsers typically infer language conventions from the HTML lang attribute, certain fonts use non-standard language system tags, or documents require language-specific typography without altering semantic content language. The CSS font-language-override property provides explicit control over OpenType language systems. This tutorial covers inspecting font-language-override in Safari Web Inspector.

The Mechanics of font-language-override

OpenType fonts contain a Language System Table (LangSys) that dictates which glyph substitutions occur for a specific language. The font-language-override property accepts a three-letter OpenType language system tag enclosed in quotes (e.g. font-language-override: "TRK"; for Turkish, "NLD"; for Dutch, or "PLK"; for Polish). When set to normal (default), the browser uses the document language tag defined in the HTML hierarchy. Overriding this value forces the font engine to apply language-specific glyph substitution rules directly.

Authoring Multilingual Typographic Styles in CSS

Configure language-specific typographic formatting across editorial components:

/* Enforce Turkish OpenType glyph substitution rules */
.turkish-masthead {
  font-family: "Minion Pro", Georgia, serif;
  font-language-override: "TRK";
  text-transform: uppercase;
}

/* Dutch ligature and digraph optimization */
.dutch-literature {
  font-family: "Baskerville", serif;
  font-language-override: "NLD";
}

/* Fallback using low-level font-feature-settings */
@supports not (font-language-override: "TRK") {
  .turkish-masthead {
    font-feature-settings: "locl" 1;
  }
}

Inspecting Language Overrides in Safari Web Inspector

1. Launch Safari on macOS and open your multilingual typography article.
2. Right-click the text block and select Inspect Element.
3. In Web Inspector, open the Elements tab and locate the Computed pane in the right sidebar.
4. Filter by language and confirm that font-language-override resolves to "TRK".
5. Scroll down to the Fonts section and locate the active font family.
6. Expand the OpenType Features drawer. Verify that the locl (Localized Forms) feature table is active and correctly bound to the specified language system.

Testing Glyph Transformations Live

1. In the Styles panel, select the font-language-override rule.
2. Toggle the property between "TRK" and normal.
3. Observe the glyphs in the viewport: note how letters like “i” accurately preserve dot accents during uppercase transformations under Turkish rules compared to standard Latin rendering.