How to Inspect CSS font-variant-alternates Character Variants in Safari Web Inspector

While stylistic sets (ss01–ss20) alter entire families of coordinated letterforms simultaneously, character variants (cv01–cv99) allow web designers to target individual glyphs with surgical precision—such as choosing a single-storey lowercase “a”, an open-tail “g”, or a slashed zero. Using modern CSS, the font-variant-alternates: character-variant() property and @font-feature-values at-rule replace low-level numeric strings with semantic declarations. Apple Safari offers dedicated inspection tools within Safari Web Inspector to explore and test these glyph variants.

Understanding Character Variants vs Stylistic Sets

In OpenType font design, character variants provide selective control over isolated glyphs without altering surrounding typography:

• Stylistic Sets (ssXX): Bundle multiple letterform changes into a cohesive thematic styling preset (e.g. geometric aesthetics across all vowels and punctuation).
• Character Variants (cvXX): Offer granular options for a single specific character, often providing multiple design permutations (e.g. cv01 variant 1 vs variant 2 for the letter ‘g’).

Configuring Semantic Character Variants in CSS

Modern CSS allows developers to map readable names to OpenType character variant indices using @font-feature-values:

/* Define semantic mappings for the font family */
@font-feature-values "Fira Code" {
  @character-variant {
    slashed-zero: 1;
    open-ampersand: 2;
    curved-bracket: 3 1; /* Feature 3, parameter value 1 */
  }
}

/* Apply character variants semantically */
.code-block-display {
  font-family: "Fira Code", monospace;
  font-variant-alternates: character-variant(slashed-zero, open-ampersand);
}

This approach produces clean, readable CSS that is easy to maintain across team codebases, eliminating cryptic numbers such as font-feature-settings: "cv01" 1, "cv02" 1;.

Auditing Character Variants in Safari Web Inspector

Safari Web Inspector includes dedicated OpenType inspection tooling that reveals active character substitutions:

1. Launch Safari and navigate to Develop > Show Web Inspector (Cmd+Option+I on macOS).
2. Select the Elements panel and click on the target element containing custom typography.
3. In the right sidebar, click the Font icon in the tab bar.
4. Scroll down to the Character Variants (cvXX) category under OpenType Features.
5. Safari Web Inspector enumerates all character variant tables present in the active font file. Active variants appear highlighted in blue with parameter badges.
6. Toggle individual variants directly inside the inspector UI to preview instant glyph replacements in the browser canvas without changing source code.

Best Practices for Font Packaging and Subset Retention

To ensure character variants render reliably across all client devices, follow these packaging guidelines:

• Audit web font subsets: When producing WOFF2 web font files via font optimisers, verify that optional OpenType GSUB lookup tables (such as cv01 through cv99) are not stripped during subsetting.
• Match font families accurately: The family string inside @font-feature-values "Name" must match the computed font-family property identically.
• Validate fallback rendering: If an end user views the page with a generic fallback font, the character-variant rule is ignored gracefully without altering text layout or legibility.