@font-palette-values CSS At-Rule

If this site has been useful, we’d love your support! Consider buying us a coffee to keep things going strong!

Description

The @font-palette-values at-rule provides a way for authors to supply named, CSS-level palette definitions and mappings for color-capable fonts. Instead of editing or producing multiple font files to achieve different color themes, you can declare palette sets in CSS that tell the rendering system how to interpret or replace the palette entries a color font exposes. This lets the same glyph shapes be painted with different fills and strokes according to a document- or theme-level choice, without altering the font binary.

Using the at-rule you can express alternate palettes, remappings of a font’s native palette indices, and fallbacks for missing entries so that fonts with CPAL/COLR (or other color-capable formats) can be adapted consistently across a site. That makes it straightforward to implement brand color variations, dark-mode or high-contrast themes, and user-preference-driven color changes: the glyph geometry and layering remain unchanged while only the palette that supplies the visual colors is swapped or adjusted. Because the mechanism works at the palette-index level, small changes (for example, replacing a single palette entry) are inexpensive to author and maintain.

In practice this at-rule is consumed by the corresponding CSS font-palette selection mechanism on elements so that different parts of a document can pick among the declared palettes. It also improves accessibility and resilience: authors can provide high-contrast or simplified palettes for assistive needs, and they can supply sensible colors if a font does not expose a given index. Finally, this separation of shape and color preserves reuse — the same color font can serve many visual designs — and enables dynamic, script-driven theming without repackaging or rehosting fonts.

Syntax

@font-palette-values = 
  @font-palette-values <dashed-ident> { <declaration-list> }

Values

<dashed-ident>Is a user defined identifier, that while it looks like a CSS custom property behaves in a different way and is not wrapped in a CSS var() function.

Example

/* Specify the font palette */

.my-element {

  font-palette: my-palette;

}



/* Override the default value for the primary color */

@font-palette-values my-palette {

  primary: #ff0000;

}

Browser Support

The following information will show you the current browser support for the CSS at-rule @font-palette-values. Hover over a browser icon to see the version that first introduced support for this CSS at-rule.