How to Inspect and Control CSS font-variant-alternates in Safari Web Inspector

Many professional digital typefaces bundle alternate glyph designs—ranging from single-storey “a” and “g” variants to sweeping calligraphic swashes, decorative terminal flourishes, historical character shapes, and contextual stylistic sets. While early CSS relied on opaque, numerical OpenType feature strings (such as font-feature-settings: "salt" 1, "swsh" 2), modern CSS introduces a semantic, human-readable abstraction through the font-variant-alternates property paired with the @font-feature-values at-rule. Using Safari Web Inspector on macOS and iOS, developers can live-inspect declared stylistic aliases, test swash substitutions, and debug font feature cascades directly within WebKit.

Understanding font-variant-alternates and @font-feature-values

The font-variant-alternates property provides named functional notations that activate specific OpenType substitution tables:

• stylistic(name): Activates individual stylistic alternate glyphs (OpenType salt feature), allowing authors to select specific alternate letterforms for key branding marks.
• swash(name): Activates elegant calligraphic flourishes and elongated entry/exit strokes (OpenType swsh and cswh features), typically on initial capitals or terminal lowercase characters.
• ornaments(name): Replaces standard characters with decorative dingbats, fleuron leaf motifs, and typographic dividers (OpenType ornm).
• historical-forms: Directly activates archaic, historical letterforms (such as the long “s” ſ) via OpenType hist without requiring custom mapping rules.
• styleset(name): Activates cohesive stylistic sets (OpenType ss01 through ss20) that harmonize character variations across the entire font alphabet.

Configuring @font-feature-values in Stylesheets

Because font vendors assign different numerical indices to their internal alternate glyphs, CSS uses @font-feature-values to bind friendly alias names to specific font family feature numbers:

/* Define named aliases for specific font families */
@font-feature-values "Baskerville", "Libre Baskerville" {
  @swash {
    flowering: 1;
    flourish: 2;
  }
  @styleset {
    geometric-accents: 1;
    flat-terminals: 2;
  }
  @stylistic {
    single-storey-a: 1;
  }
}

/* Apply the named features across typography */
.editorial-quote {
  font-family: "Baskerville", serif;
  font-variant-alternates: swash(flowering);
}

.headline-alternate {
  font-family: "Baskerville", serif;
  font-variant-alternates: stylistic(single-storey-a) styleset(geometric-accents);
}

.archaic-manuscript {
  font-family: "Baskerville", serif;
  font-variant-alternates: historical-forms;
}

Inspecting font-variant-alternates via Safari Web Inspector

To inspect active stylistic alternates in Safari:

1. Open Safari, navigate to your web application, and open developer tools via Develop > Show Web Inspector (or press Cmd + Option + I).
2. Select the text element styled with alternate glyphs using the Element Inspector.
3. Navigate to the Styles panel on the right sidebar and select the Computed tab.
4. Filter the computed styles for font-variant-alternates. Confirm that the calculated value reflects your declared function (e.g., swash(flowering)) rather than falling back to normal.

/* Verify computed property in Web Inspector Console */
window.getComputedStyle(document.querySelector('.editorial-quote')).fontVariantAlternates;
// Returns: "swash(flowering)"

Auditing Glyph Substitutions in the Fonts Panel

Safari Web Inspector features a dedicated Fonts panel that exposes underlying OpenType features:

1. With the target element selected, click the Fonts tab located in the right-hand inspection drawer.
2. Review the Rendered Fonts list. Ensure Safari is rendering from the exact typeface defined in your @font-feature-values rule. If Safari falls back to an unstyled system font, named aliases cannot resolve.
3. Under Font Features, locate the Alternates & Stylistic Sets category.
4. Observe the real-time canvas preview. Toggle stylistic set checkboxes or alter swash parameters in the Styles panel to see characters dynamically transform between standard and calligraphic forms.

Debugging Feature Fallback and Syntax Incompatibilities

If alternate glyphs fail to render:

• Font Name Matching: The family name declared in @font-feature-values "<family-name>" must match the primary font name declared in the element’s font-family string exactly. Generic family names (like serif or sans-serif) are invalid inside @font-feature-values.
• Browser Support Verification: Safari 16.0 and later on macOS and iOS fully support font-variant-alternates and @font-feature-values. For legacy WebKit compatibility, provide a fallback rule using @supports:

/* Progressive enhancement fallback */
.editorial-quote {
  font-feature-settings: "swsh" 1; /* Legacy fallback */
}

@supports (font-variant-alternates: swash(flowering)) {
  .editorial-quote {
    font-feature-settings: normal;
    font-variant-alternates: swash(flowering);
  }
}

Leveraging font-variant-alternates and auditing typographic substitution in Safari Web Inspector brings authentic editorial sophistication and high calligraphic refinement to web layouts across Apple devices.