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
/* 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 asnormal
. 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 twofont-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.
@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:
<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.
@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 --greyNabla {
font-family: Nabla;
base-palette: 3; /* this is Nabla's grey palette */
}
@keyframes animate-palette {
from {
font-palette: --greyNabla;
}
to {
font-palette: --blueNabla;
}
}
p {
font-family: "Nabla";
font-size: 5rem;
margin: 0;
text-align: center;
animation: animate-palette 4s 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
See also
palette-mix()
@font-palette-values
base-palette
descriptorfont-family
descriptoroverride-colors
descriptor