How to Inspect and Customise CSS Color Font Palettes in Google Chrome DevTools

Modern web typography has evolved beyond traditional monochrome vector glyphs. With the advent of OpenType color font formats—specifically COLRv1 (Color Vector Fonts version 1) and OpenType-SVG—fonts can include multi-colored graphical components, gradient fills, and layered vector illustrations directly inside the font binary. Notable examples include modern emoji fonts, illustrated display typefaces, and custom corporate icon systems.

To give web designers and frontend engineers programmatic control over these multicolored layers, modern CSS introduced the @font-palette-values at-rule and the font-palette property. With these declarations, developers can redefine color stops inside a font without modifying the underlying binary file. To streamline auditing and live tweaking of color fonts, Google Chrome DevTools provides native inspection tools in the Elements and Styles panels, allowing real-time previewing and palette customization.

Understanding How CSS Font Palettes Function

Color fonts built under the COLRv1 specification embed one or more predefined color palettes into their OpenType tables. These internal palettes assign specific colors to distinct glyph layers (such as the base, shadow, and highlights of an illustrated letterform).

The CSS @font-palette-values at-rule allows developers to declare a custom palette by referencing an existing font family and overriding specific color index slots:

@font-palette-values --BrandTheme {
  font-family: "Bungee Spice";
  base-palette: 0;
  override-colors:
    0 #0070f3,
    1 #ff4081,
    2 #ffffff;
}

.headline {
  font-family: "Bungee Spice";
  font-palette: --BrandTheme;
}

In this rule, base-palette: 0 targets the font’s default internal color scheme, while the override-colors block remaps individual layer indices (0, 1, 2) to custom brand hex codes. The font-palette property then binds the customized palette to any element on the page.

Locating Color Fonts and Palettes in Chrome DevTools

To inspect color fonts on a live web application, launch Google Chrome and open DevTools by pressing Ctrl + Shift + I on Windows or Cmd + Option + I on macOS.

Follow these steps to locate active font palettes:

1. Open the Elements panel.
2. Use the inspect cursor to select an element styled with a color font.
3. In the right-hand panel, select the Styles tab.
4. Scroll down or inspect the Computed tab to confirm that the rendered font matches the intended color typeface under the Rendered Fonts section at the bottom.

In the Styles pane, locate the font-palette declaration applied to your selector. Chrome DevTools renders an inline link next to the custom palette identifier (e.g., --BrandTheme) pointing directly to the defining @font-palette-values rule block.

Inspecting and Editing @font-palette-values Declarations

Clicking the palette identifier link in the Styles pane jumps directly to the @font-palette-values at-rule in the stylesheet view:

• Base Palette Indicator: DevTools displays the active base-palette index (e.g., 0 or 1). If the font contains alternate factory color schemes (such as dark mode or pastel variations), you can click the index number and increment it to test factory-built variations instantly.
• Color Swatch Previews: Next to each numeric index in the override-colors declaration, DevTools displays an interactive color swatch square previewing the current color.
• Live Color Picker Integration: Clicking any color swatch opens Chrome’s native visual color picker. As you drag the color wheel or adjust alpha transparency, the glyph layers on the live webpage update in real time.

Auditing Standard and System Palettes

In addition to custom declared palettes, CSS supports standardized keyword palettes:

• font-palette: light; — Enforces the font’s optimized light-mode color scheme.
• font-palette: dark; — Activates the font’s internal dark-mode color scheme.
• font-palette: normal; — Reverts to the default factory palette (index 0).

In Chrome DevTools, you can edit the font-palette property live inside the Styles pane by typing dark or light to verify that the color font adapts appropriately to system color scheme preferences (prefers-color-scheme).

Troubleshooting Fallback and Font Binding Issues

When implementing @font-palette-values, styling failures often occur if the font-family descriptor inside the at-rule does not match the loaded typeface name precisely.

If your custom palette fails to render in Chrome:

• Verify that the font-family string in @font-palette-values exactly matches the name defined in your @font-face rule (case-sensitive).
• Check the Chrome DevTools Console for warnings. If a font does not support COLRv1 color tables or if an index in override-colors exceeds the font’s available color layers, Chrome logs an invalid palette warning.
• Inspect the Network tab to ensure the font file loaded as a modern .woff2 container supporting OpenType color tables rather than an older format that stripped COLR data during subsetting.

By leveraging Chrome DevTools to inspect and customize CSS font palettes, web developers and brand designers can craft dynamic, theme-aware multicolored typography without relying on heavy bitmap images or external SVG sprite sheets.