@font-palette-values CSS At-Rule


The CSS @font-palette-values at-rule allows you to customize the default values of a font's palette. A font palette is a collection of colors that can be used to apply color variations to a font. This can be useful for creating more visually interesting and dynamic text, or for matching the colors of your font to the overall design of your website.

To use the @font-palette-values at-rule, you first need to specify the name of the font's palette. You can do this by using the font-palette property on a CSS element. Once you have specified the font palette, you can then use the @font-palette-values at-rule to override the default values for any of the colors in the palette.

The @font-palette-values at-rule takes two arguments: the name of the color to override, and the new value for the color. The color name can be any of the following:
  - primary
  - secondary
  - tertiary
  - accent
  - light
  - dark

The new value for the color can be any valid CSS color value, such as a hex code, RGB value, or HSL value.


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


  • <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.


/* 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 table will show you the current browser support for the at-rule @font-palette-values.

Edge Chrome Firefox Opera Safari
Tablets / Mobile
Chrome Firefox Opera Safari Samsung Webview

Last updated by CSSPortal on: 30th September 2023