css at rule

`@font-palette-values` CSS at-rule

The @font-palette-values CSS at-rule allows you to customize the default values of font-palette created by the font-maker.

Syntax

@font-palette-values --identifier {
  font-family: "Bixa";
}
.my-class {
  font-palette: --identifier;
}

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

Descriptors

base-palette
- : Specifies the name or index of the base-palette, created by the font-maker, to use.
font-family
- : Specifies the name of the font family that this palette can be applied to. A font-family name is required for the @font-palette-values rule to be valid.
override-colors
- : Specifies the colors in the base palette to override.

Formal syntax

Examples

Overriding colors in an existing palette

This example shows how you can change some or all of the colors in a color font.

HTML

<p>default colors</p>
<p class="alternate">alternate colors</p>

CSS

@import "https://fonts.googleapis.com/css2?family=Bungee+Spice";
p {
  font-family: "Bungee Spice", fantasy;
  font-size: 2rem;
}
@font-palette-values --Alternate {
  font-family: "Bungee Spice";
  override-colors:
    0 #00ffbb,
    1 #007744;
}
.alternate {
  font-palette: --Alternate;
}

Result

When overriding colors of the normal or base-palette at index 0 you do not need to declare which base-palette to use. This should only be done when overriding a different base-palette. If you are overriding all the colors then there is also no need to specify the base-palette to use.

Interactive exampleOpen the canonical MDN source to run this embedded demo.

Specifications

SpecificationsStandards references are available on the canonical MDN page.

Browser compatibility

Browser compatibilityCompatibility data is available on the canonical MDN page.