How to Inspect and Debug CSS @font-palette-values in Safari Web Inspector

Modern digital typography has expanded beyond monochrome glyphs with the rise of OpenType Color Fonts (COLRv0, COLRv1, and SVG font tables). These advanced fonts embed multi-layered vector graphics, multi-tone gradients, and custom color illustrations directly into standard font files—powering full-color emoji systems, expressive display typography, and multi-color icon systems. Traditionally, the color palettes inside these fonts were hardcoded into the binary font tables by the type foundry. The CSS Fonts Module Level 4 specification resolves this limitation natively through the @font-palette-values at-rule and the font-palette property. Supported in modern WebKit and Safari, developers can inspect, customize, and debug color font palettes directly within Safari Web Inspector.

How CSS @font-palette-values Customizes Color Fonts

OpenType color fonts contain internal color palette tables (the CPAL table), often providing several predefined palettes (such as light mode and dark mode variations). The @font-palette-values at-rule allows web authors to override these internal color indices using standard CSS colors without modifying the underlying font file:

• font-family: Identifies the exact font family name that this custom palette rule applies to.
• base-palette: Specifies the baseline palette index embedded in the font (e.g. 0, 1, light, or dark) to use as the foundational starting point.
• override-colors: Maps specific integer color indices within the font glyph layers to custom CSS color values (including HEX, RGB, or modern wide-gamut OKLCH colors).
• font-palette Property: Binds the defined custom palette name (e.g. font-palette: --brand-palette;) to targeted HTML elements.

Defining Custom Font Palettes in CSS

To customize a multi-colored display web font (for example, a decorative heading font named "Bungee Spice" or a color icon font):

/* 1. Define custom palette mapping */
@font-palette-values --brand-heading-palette {
    font-family: "Bungee Spice";
    base-palette: light;
    override-colors:
        0 #007aff,               /* Primary face color */
        1 oklch(0.65 0.22 140),  /* Accent 3D extrusion */
        2 #1d1d1f;               /* Base shadow outline */
}

/* 2. Apply the custom palette to headings */
.hero-title {
    font-family: "Bungee Spice", sans-serif;
    font-size: 4rem;
    font-palette: --brand-heading-palette;
}

When rendered in Safari, WebKit intercepts the glyph rendering pipeline, swapping the font’s default palette indices with your specified brand colors.

Inspecting Font Palettes in Safari Web Inspector

Safari Web Inspector provides purpose-built typography inspection tools for color fonts:

1. Launch Safari and navigate to your web page.
2. Right-click the styled typography element and choose Inspect Element.
3. In the right-hand inspection sidebar, select the Styles tab.
4. Scroll through the stylesheet rules to locate your @font-palette-values at-rule block.
5. Confirm that Safari parses the rule without invalid syntax warnings. Verify that the dashed ident name (e.g. --brand-heading-palette) matches the font-palette declaration applied to the selector.

Auditing Glyph Layers and Palette Indexes in the Font Details Pane

To determine which layer indices correspond to which parts of a glyph (such as highlights, shadows, or fill surfaces):

1. In the Safari Web Inspector right-hand sidebar, switch to the Font tab.
2. Scroll to the Features / Palettes section. Safari displays the active font format (confirming COLRv0 or COLRv1 support).
3. Examine the embedded base palettes provided by the font author. Click through available preset indices (0, 1, 2) to observe which glyph elements shift color in the live preview.
4. Identify the exact numerical index (e.g. Index 0 for outer strokes, Index 1 for inner fills) before constructing your override-colors list.

Integrating Dynamic Dark Mode Switching with Font Palettes

Because font palettes can be conditionally declared inside media queries, you can dynamically adapt color fonts to system Dark Mode preferences:

/* Light mode default palette */
@font-palette-values --adaptive-font-palette {
    font-family: "CustomColorFont";
    base-palette: light;
}

/* Dark mode palette adaptation */
@media (prefers-color-scheme: dark) {
    @font-palette-values --adaptive-font-palette {
        font-family: "CustomColorFont";
        base-palette: dark;
        override-colors:
            0 #ffffff,
            1 #5e5ce6;
    }
}

.dynamic-brand-text {
    font-family: "CustomColorFont";
    font-palette: --adaptive-font-palette;
}

Toggling Dark Mode emulation in Safari Web Inspector verifies that the glyph layers seamlessly shift from light pastels to high-contrast luminous tones.

Fallbacks and Progressive Enhancement

To ensure non-supporting browsers gracefully render standard monochrome text or default font palettes, use feature queries:

/* Standard typography baseline */
.brand-mark {
    font-family: "CustomColorFont", sans-serif;
    color: #007aff;
}

/* Progressive enhancement for modern WebKit */
@supports (font-palette: --custom) {
    .brand-mark {
        font-palette: --brand-heading-palette;
    }
}

Auditing the @supports rule in Safari Web Inspector confirms that Safari accurately activates the color font override pipeline.