How to Inspect CSS font-feature-settings Stylistic Alternates (salt) in Safari Web Inspector

Modern OpenType variable typefaces often incorporate alternative glyph designs known as stylistic alternates. Controlled via the CSS property font-feature-settings: "salt" 1; or the modern equivalent font-variant-alternates: stylistic(feature-name);, these glyphs grant designers granular typographic control. Apple Safari provides dedicated typographic tooling inside Safari Web Inspector to inspect, preview, and audit these feature flags across macOS and iOS rendering contexts.

Understanding Stylistic Alternates in CoreText

Underneath Safari’s WebKit rendering pipeline, Apple’s CoreText layout engine evaluates OpenType layout tables (GSUB) to substitute default character mappings with artist-defined stylistic variants. When multiple stylistic sets or alternates coexist within an enterprise web font, verifying whether the browser correctly applies glyph replacement is crucial for visual consistency.

Configuring Stylistic Alternates in CSS

Declare the OpenType stylistic alternate rule within your stylesheet targeting your custom web font:

.custom-heading {
  font-family: "Cabinet Grotesk", -apple-system, BlinkMacSystemFont, sans-serif;
  font-feature-settings: "salt" 1;
  font-weight: 700;
  letter-spacing: -0.02em;
}

/* Fallback and multi-index alternates */
.custom-heading-alt2 {
  font-feature-settings: "salt" 2;
}

Using Safari Web Inspector Typographic Tools

To inspect and validate active glyph modifications in Safari:

1. Enable the Developer Menu via Safari > Settings > Advanced and check Show features for web developers.
2. Right-click the target typographical element and select Inspect Element.
3. In the right-hand panel of Web Inspector, switch to the Font tab.
4. Expand the Features disclosure section to view all discovered OpenType layout capabilities.
5. Locate Stylistic Alternates (salt) and toggle the interactive switch to observe immediate live glyph substitution on the canvas.

Debugging Multi-Value Conflicts

When chaining multiple OpenType features, ensure commas separate individual feature declarations within font-feature-settings, as subsequent isolated property definitions completely overwrite previous statements:

/* Incorrect: Overwrites previous declaration */
.element {
  font-feature-settings: "salt" 1;
  font-feature-settings: "ss01" 1;
}

/* Correct: Combined OpenType feature string */
.element {
  font-feature-settings: "salt" 1, "ss01" 1;
}

Audit the Computed CSS pane in Safari Web Inspector to verify that cascade inheritance preserves your intended stylistic definitions without unexpected parent resets.