@font-palette-values

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-values CSS at-rule allows you to customize the default values of font-palette created by the font-maker.

Syntax

css
@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

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

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

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

CSS

css
@import url(https://fonts.googleapis.com/css2?family=Bungee+Spice);
p {
  font-family: "Bungee Spice";
  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.

Specifications

Specification
CSS Fonts Module Level 4
# at-ruledef-font-palette-values

Browser compatibility

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
@font-palette-values
base-palette
font-family
override-colors

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

See also