CSS Almanac → At-Rules → F → @font-palette-values

@font-palette-values

Juan Diego Rodríguez on Apr 21, 2025

The @font-palette-values at-rule represents a color palette used in a multi-color font. It lets you pick between the font’s preexisting palettes and change its colors. It can then be applied to elements using the font-palette property.

For example, the following snippet will pick the Honk font and change its two-color palette for the h1 element:

@font-palette-values --blue {
  font-family: Bungee Spice;
  override-colors: 0 lch(88% 91 144), 1 lch(72% 49 241);
}

h1 {
  font-family: Bungee Spice;
  font-palette: --blue;
}

The @font-palette-values at-rule is defined in the CSS Fonts Module Level 4 specification.

Syntax

@font-palette-values <dashed-ident> {
  font-family: <family-name>#;
  base-palette: light | dark | <integer [0, ∞]>;
  override-colors: [ <integer [0, ∞]> <color>]#;
}

Arguments and descriptors

/* Overriding Colors */
@font-palette-values --custom-pink {
  font-family: Rocher;
  override-colors: 0 lch(70% 39 290), 2 lch(42% 53 280);
}

/* Selecting a predefined palette */
@font-palette-values --pink {
  font-family: Rocher;
  base-palette: 2;
}

/* Overriding Colors from another palette */
@font-palette-values --custom-pink {
  font-family: Rocher;
  base-palette: 3;
  override-colors: 0 lch(70% 39 290), 2 lch(42% 53 280);
}

<dashed-ident>: A dashed ident (an ident starting with two dashes, such as --pink) used to identify the font palette. It can then be used inside the font-palette property.
<declaration-list>: A list of the descriptors used to define the font palette.
- font-family: The font families the palette applies to.
- base-palette: Picks a palette from the font’s predefined palettes. Some fonts have a default palette for light and dark backgrounds, which can be selected using their respective light and dark values. Otherwise, we can use an integer to pick the palette’s (zero-based) index. If the index isn’t found, it defaults to 0.
- override-colors: Picks a color from the palette and overrides it with another color. It’s written as a comma-separated list of the color’s index and the new color.

Custom properties inside @font-palette-values aren’t supported just yet

Basic usage

Multi-color fonts aren’t something new to the web. Take, for example, this 2016 post by Robin Rendle on Experimenting with Color Fonts in which he showcases several color palettes on the same font:

You’ll notice how he used the font-feature-settings property to select a predefined palette from the font file. There wasn’t a way to change each color individually. As Robin points out:

It doesn’t appear that in CSS it’s possible to change the various colors inside a color font. So for a while, we’re stuck with whatever styles type designers provide for us in the font files themselves.

Nowadays, we can use the @font-palette-values to select a font’s palette and change its colors. To do so, we’ll first need a multi-color font such as Bungee Spice by David Jonathan Ross. If loaded, you can see the font’s default palette is a two-color gradient going from yellow to red:

Using @font-palette-values, we pick Bungee Spice as the font-family and use override-colors to select each color by its index and replace it with another one:

@font-palette-values --blue {
  font-family: Bungee Spice;
  override-colors: 0 lch(88% 91 144), 1 lch(72% 49 241);
}

To apply this new palette, we write its identifier on the font-palette property. Just remember also to apply the same font-family on the element:

h1 {
  font-family: Bungee Spice;
  font-palette: --blue;
}

Here we didn’t need the base-palette descriptor since we changed all the colors of the palette. However, we may want to use another preexisting font palette and then change one color. Take, for example, a font like Rocher Color by Henrique Beier, which has four colors:

Right now is displaying its default palette, but we can check if it comes with other palettes using the Wakamai Fondue tool. In this case, it shows that Rocher Color comes with 11 different palettes in its font file:

Knowing this, let’s pick the fourth palette using the base-palette descriptor:

@font-palette-values --icepop {
  font-family: Rocher;
  base-palette: 3;
}

h1 {
  font-family: Rocher;
  font-palette: --icepop;
}

Now, to change a specific color of the palette, we can use override-colors as we did before. For example, let’s switch that red for purple:

@font-palette-values --icepop {
  font-family: Rocher;
  base-palette: 3;
  override-colors: 0 lch(31% 75 307);
}

Using different fonts

You may have noticed that the @font-palette-values identifiers represent the colors or “vibe” of the palette, not the font-family associated with it. So, instead of writing --rocher-icepop it’s just --icepop. This is done intentionally since we may have different fonts with the same colors:

@font-palette-values --blue {
  font-family: Bungee Spice;
  override-colors: 0 lch(88% 91 144), 1 lch(72% 49 241);
}

@font-palette-values --blue {
  font-family: Honk;
  base-palette: 3;
  override-colors: 0 lch(88% 91 144), 1 lch(72% 49 241);
}

When applied to an element, it will check its font-family and use the corresponding palette for that font:

h1 {
  font-family: Honk;
  font-palette: --blue;
}

h2 {
  font-family: Bungee Spice;
  font-palette: --blue;
}

This also means that we could use both fonts together, one as a fallback of the other, and its font-palette will match the correct palette:

h1 {
  font-family: Honk, Bungee Spice;
  font-palette: --blue;
}

Animating color fonts

It’s also possible to animate between two palettes on the same font, both using CSS transitions and animations. In the case of transition, we can change the element’s font-palette when the user hovers over the element, and then set up a transition between the states:

@font-palette-values --rainbow {
  font-family: Honk;
  base-palette: 1;
}

h1 {
  font-family: Honk;
  transition: font-palette 250ms ease-in;

  &:hover {
    font-palette: --rainbow;
  }
}

Setting up the animation with @keyframes is similar. We’ll first have to define two @font-palette-values to animate between them:

@font-palette-values --neo {
  font-family: Honk;
  base-palette: 3;
}

@font-palette-values --rainbow {
  font-family: Honk;
  base-palette: 6;
}

Then we can change the font-palette between keyframes

@keyframes animate-palette {
  from {
    font-palette: --neo;
  }

  to {
    font-palette: --rainbow;
  }
}

h1 {
  font-family: Honk;
  font-palette: --neo;
  animation: animate-palette 2s infinite alternate;
}

Specification

The @font-palette-values at-rule is defined in the CSS Fonts Module Level 4 specification, which is currently in Editor’s Draft.

Browser support

@font-palette-values and font-palette are supported in all browsers. However, animations between palettes are only supported in Chromium browsers:

Be careful, though. The COLRv0 format works across all browsers, but COLRv1 isn’t fully supported in Safari.