How to Inspect and Control CSS font-feature-settings and OpenType Features in Safari Web Inspector

Professional web typography relies heavily on OpenType font features to deliver sophisticated editorial layouts. OpenType features enable advanced typographic capabilities including small capitals, oldstyle figures, contextual alternates, discretionary ligatures, tabular numerals, and stylistic sets. While modern CSS includes high-level properties such as font-variant-caps and font-variant-numeric, the low-level font-feature-settings property remains an essential CSS mechanism for activating specific four-letter OpenType tags and custom stylistic variants across custom web fonts.

Safari on macOS provides deep, native typographic debugging capabilities through Safari Web Inspector. Using the Elements panel and the dedicated Fonts sidebar, web developers and digital designers can inspect active OpenType features, toggle four-letter feature tags in real time, and diagnose why custom glyph substitutions fail to render across different Apple platforms.

Understanding OpenType Feature Tags and font-feature-settings

OpenType fonts contain internal lookup tables that substitute standard glyphs with alternate representations based on four-character ASCII tags defined in the OpenType specification. Common OpenType feature tags include:

• "smcp": Small Capitals (replaces lowercase letters with proportionally scaled small capitals).
• "c2sc": Capitals to Small Capitals (converts uppercase letters to small capitals for uniform acronyms).
• "onum": Oldstyle Figures (uses non-lining numerals with ascenders and descenders that blend into body prose).
• "tnum": Tabular Figures (renders monospaced numbers with uniform character widths for data tables).
• "zero": Slashed Zero (renders a diagonal slash through the numeral zero to distinguish it from the capital letter O).
• "ss01" through "ss20": Stylistic Sets (activates curated stylistic design variations created by the typeface designer).
• "dlig": Discretionary Ligatures (activates decorative ligatures such as ct, st, or sp).

The CSS font-feature-settings property controls these tags directly using quoted strings followed by an optional numeric binary flag (1 to enable, 0 to disable):

/* Enable small caps, oldstyle figures, and slashed zero */
.editorial-lead {
    font-feature-settings: "smcp" 1, "onum" 1, "zero" 1;
}

/* Enable Stylistic Set 1 and disable discretionary ligatures */
.custom-header {
    font-feature-settings: "ss01" on, "dlig" off;
}

Enabling Safari Developer Tools

To access typographic debugging tools in Safari, ensure that developer features are enabled on macOS:

1. Launch Safari on your Mac and open Settings (or press Command + ,).
2. Navigate to the Advanced tab.
3. Check the box labeled Show features for web developers (or Show Develop menu in menu bar on older macOS releases).
4. Close the Settings window.

Right-click any text element on a webpage and select Inspect Element to open Safari Web Inspector.

Inspecting Active Typography in the Fonts Panel

When Safari Web Inspector opens, navigate to the Elements tab. In the right-hand details pane, select the Fonts tab (located alongside Styles, Computed, and Layers):

1. Select the target text node in the DOM tree hierarchy.
2. Inspect the Fonts sidebar pane to view the active font family, rendered glyph source (system font vs web font download), font weight, and format.
3. Scroll down to the Font Details section, which exposes complete OpenType feature support detected within the loaded typeface file.
4. Observe the list of detected OpenType features. Safari automatically classifies features into categories such as Ligatures, Capitals, Numerals, and Stylistic Sets.

If an OpenType tag is greyed out or missing from this list, the font file itself does not contain the corresponding glyph table, explaining why CSS rules targeting that feature produce no visual change on screen.

Testing font-feature-settings Interactively in the Styles Pane

You can test and override font-feature-settings dynamically without modifying your production CSS files:

1. Switch to the Styles tab in the right-hand sidebar.
2. Under the selected CSS rule block, click within the declaration area or click the + button to add a new property.
3. Type font-feature-settings and press Tab.
4. Enter desired four-letter tags, such as "ss01" 1, "tnum" 1.
5. Observe Safari’s WebKit rendering engine update the text instantly on the canvas.

To verify which stylistic sets are bundled with a modern typeface (such as Inter, SF Pro, Roboto, or Fira Code), test each set sequentially in the Styles pane:

/* Test individual stylistic alternates */
font-feature-settings: "ss01" 1;
font-feature-settings: "ss02" 1;
font-feature-settings: "ss03" 1;

Comparing High-Level vs Low-Level CSS Font Properties

In modern web typography guidelines, high-level CSS properties (such as font-variant-numeric and font-variant-caps) are preferred over font-feature-settings for standard typography because high-level properties cascade cleanly and do not reset unrelated features. However, low-level font-feature-settings remains necessary when configuring custom stylistic sets ("ss01") or contextual swashes.

In Safari Web Inspector’s Computed tab, you can verify how WebKit reconciles high-level and low-level declarations. When both properties are declared on an element, font-feature-settings takes precedence over equivalent font-variant declarations. If an element fails to display tabular numerals, check whether an inherited font-feature-settings rule accidentally overwrote a child font-variant-numeric: tabular-nums; declaration.

Validating Cross-Platform OpenType Fallbacks

Because not all user devices have the same local font files, verify font feature fallbacks in Web Inspector by disabling web fonts or inspecting computed fallbacks. If a primary web font fails to download, system fallback fonts (such as system-ui or Helvetica Neue) may interpret font-feature-settings differently or ignore stylistic set tags completely.

By using Safari Web Inspector’s Fonts panel to verify glyph availability and testing four-letter OpenType tags in the Styles pane, you ensure clean, consistent, and beautiful typographic execution across all macOS, iOS, and iPadOS devices.