← Back to at-rules

CSS At-rule

@font-palette-values

Typography

Overrides the colors in a color font's built-in palette.

Syntax

@font-palette-values --name { font-family: Name; override-colors: 0 #color; }

Example

@font-palette-values --brand { font-family: 'ColorFont'; override-colors: 0 #3dffa0; }

Common use cases

  • Recoloring emoji or color fonts
  • Brand-aligned color font theming
  • Custom palette for variable color fonts

Practical developer insight

@font-palette-values only works with color fonts (COLRv1, SVG fonts) — check if your font supports color palettes before using it.

Related

@font-face@font-feature-valuescolor