font-palette

Baseline 2022

Newly available

Since November 2022, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

The font-palette CSS property allows specifying one of the many palettes contained in a color font that a user agent may use for the font. Users can also override the values in a palette or create a new palette by using the @font-palette-values at-rule.

Note: A font-palette palette takes precedence when coloring a font. The color property will not override a font palette, even if specified with !important.

Syntax

css

/* Using a font-defined palette */
font-palette: normal;

/* Using a user-defined palette */
font-palette: --one;

/* Creating a new palette by blending two others */
font-palette: palette-mix(in lch, --blue, --yellow);

Values

normal: Specifies the default color palette or the default glyph colorization (set by the font maker) to be used for the font. With this setting, the palette in the font at index 0 is rendered.
light: Specifies the first palette in the font that matches 'light' to be used for the font. Some fonts contain metadata that identify a palette as applicable for a light (close to white) background. If a font does not have this metadata, the light value behaves as normal.
dark: Specifies the first palette in the font that matches 'dark' to be used for the font. Some fonts contain metadata that identify a palette as applicable for a dark (close to black) background. If a font does not have this metadata, the value behaves as normal.
<palette-identifier>: Allows you to specify your own values for the font palette by using the @font-palette-values at-rule. This value is specified using the <dashed-ident> format.
palette-mix(): Creates a new font-palette value by blending together two font-palette values by specified percentages and color interpolation methods.

Formal definition

Initial value	`normal`
Applies to	all elements and text. It also applies to `::first-letter` and `::first-line`.
Inherited	yes
Computed value	as specified
Animation type	by computed value type

Formal syntax

font-palette = 
  normal                |
  light                 |
  dark                  |
  <palette-identifier>  |
  <palette-mix()>       

<palette-mix()> = 
  palette-mix( <color-interpolation-method> , [ [ normal | light | dark | <palette-identifier> | <palette-mix()> ] && <percentage [0,100]>? ]#{2} )  

<color-interpolation-method> = 
  in [ <rectangular-color-space> | <polar-color-space> <hue-interpolation-method>? ]  

<rectangular-color-space> = 
  srgb          |
  srgb-linear   |
  display-p3    |
  a98-rgb       |
  prophoto-rgb  |
  rec2020       |
  lab           |
  oklab         |
  xyz           |
  xyz-d50       |
  xyz-d65       

<polar-color-space> = 
  hsl    |
  hwb    |
  lch    |
  oklch  

<hue-interpolation-method> = 
  [ shorter | longer | increasing | decreasing ] hue

Examples

Specifying a dark palette

This example allows you to use the first palette marked as dark (works best on a near black background) by the font-maker.

css

@media (prefers-color-scheme: dark) {
  .banner {
    font-palette: dark;
  }
}

Animating between two palettes

This example illustrates how to animate font-palette value changes to create a smooth font animation.

HTML

The HTML contains a single paragraph of text to animate:

html

<p>color-palette<br />animation</p>

CSS

In the CSS, we import a color font called Nabla from Google Fonts, and define two custom font-palette values using the @font-palette-values at-rule. We then create @keyframes that animate between these two palettes, and apply this animation to our paragraph.

css

@import url("https://fonts.googleapis.com/css2?family=Nabla&display=swap");

@font-palette-values --blueNabla {
  font-family: Nabla;
  base-palette: 2; /* this is Nabla's blue palette */
}

@font-palette-values --yellowNabla {
  font-family: Nabla;
  base-palette: 7; /* this is Nabla's yellow palette */
}

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

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

p {
  font-family: "Nabla";
  font-size: 5rem;
  margin: 0;
  text-align: center;
  animation: animate-palette 2s infinite alternate linear;
}

Result

The output looks like this:

Note: Browsers that still implement discrete font-palette animation will flip between the two palettes rather than smoothly animating.

Specifications

Specification
CSS Fonts Module Level 4 # font-palette-prop

Browser compatibility

BCD tables only load in the browser