How to Inspect CSS font-palette and Custom Colour Palettes in Safari Web Inspector

Modern typography extends beyond monochromatic glyphs with the rise of chromatic vector fonts (COLRv0 and COLRv1) and multi-coloured emoji typefaces. With CSS Fonts Module Level 4, web designers can override font colours directly inside stylesheets using font-palette and @font-palette-values rules. Safari Web Inspector includes dedicated font inspection tools to inspect embedded glyph palettes, test dark mode palette overrides, and evaluate chromatic rendering performance.

Understanding CSS font-palette Architecture

Chromatic fonts embed pre-indexed colour tables (CPAL) inside the font file binary. Modern CSS provides declarative controls over these internal colours:

• Built-In Palettes (font-palette: dark / light): Chromatic fonts often embed predefined light and dark mode colour alternatives directly in the font table.
• Custom Palettes (@font-palette-values): A stylesheet at-rule that defines customized colour replacements for numbered palette slots:

  @font-palette-values --BrandTheme {
    font-family: "Bungee Spice";
    override-colors: 0 #3b82f6, 1 #1d4ed8, 2 #93c5fd;
  }

• COLRv1 Vector Gradients: Advanced chromatic format supporting radial and linear gradients inside individual font glyphs.

Configuring Safari Web Inspector for Font Inspection

To inspect chromatic font palettes in Safari:

1. Open Safari and press Option + Command + I to launch Web Inspector.
2. Click the Elements tab.
3. Select your chromatic heading or stylized text element in the DOM tree.
4. In the right sidebar, locate the Styles panel and the dedicated Fonts panel.

Inspecting and Customizing Palettes in the Styles Panel

Review the CSS implementation applied to chromatic typography:

/* Define custom chromatic palette override */
@font-palette-values --ModernAqua {
  font-family: "Nabla";
  override-colors:
    0 #06b6d4,
    1 #0891b2,
    2 #155e75;
}

/* Apply palette to landing hero title */
.hero-chromatic-title {
  font-family: "Nabla", system-ui, sans-serif;
  font-palette: --ModernAqua;
  font-size: 3.5rem;
  line-height: 1.1;
}

Inside Safari Web Inspector:

1. Select .hero-chromatic-title in the DOM tree.
2. In the Styles panel, verify that font-palette: --ModernAqua; is active.
3. Locate the @font-palette-values block in the stylesheet rule list:
   • Notice the interactive colour swatches adjacent to each overridden slot index.
   • Click any colour swatch to launch the visual Color Picker and adjust hues live in the browser.
4. Switch to the Fonts inspection panel in the right sidebar:
   • Inspect the active font metadata, verifying whether the font utilizes COLRv0, COLRv1, or SBIX colour glyph formats.
   • Review the embedded default colour palette indices provided by the typeface designer.

Implementing Dynamic Dark Mode Palette Switching

Seamlessly adapt chromatic fonts to dark mode preferences using media queries:

@font-palette-values --DarkPalette {
  font-family: "Nabla";
  override-colors: 0 #f43f5e, 1 #e11d48, 2 #4c0519;
}

@media (prefers-color-scheme: dark) {
  .hero-chromatic-title {
    font-palette: --DarkPalette;
  }
}

In Web Inspector, click the Toggle Appearance icon in the header to simulate dark and light mode rendering instantly.

Validating Fallbacks for Monochromatic Rendering

Ensure that environments lacking chromatic font support display standard monochromatic fallback text legibly:

@supports (font-palette: dark) {
  .hero-chromatic-title {
    font-palette: --ModernAqua;
  }
}

Safari Web Inspector respects feature detection boundaries, guaranteeing graceful typographic presentation across diverse client hardware.