CSS @font-palette-values rule

Definition and usage

CSS @font-palette-values The rule is used to define the default values for custom font palettes.

Example

Default values for custom font palettes:

@font-palette-values --greenAndYellow {
  font-family: "Bungee Spice";
  override-colors: 0 yellow, 1 green;
}
@font-palette-values --pinkAndGray {
  font-family: "Bungee Spice";
  override-colors: 0 hotpink, 1 gray;
}
.alt1 {
  font-palette: --greenAndYellow;
}
.alt2 {
  font-palette: --pinkAndGray;
}

Try it yourself

CSS syntax

@font-palette-values --identifier {
  one or more descriptors
}

Attribute value

Value Description
font-family Define the name of the font family that this palette can be applied to.
base-palette Define the name or index of the base palette to be used.
override-colors Define the colors in the base palette to be overridden.

Browser support

The numbers in the table indicate the first browser version that fully supports this @ rule.

Chrome Edge Firefox Safari Opera
101 101 107 15.4 87