CSS font-palette Property

If this site has been useful, we’d love your support! Running this site takes time and resources, and every small contribution helps us keep creating valuable content. Consider buying us a coffee to keep things going strong!

☕ Buy a Coffee

Description

The font-palette CSS property allows you to specify which palette of colors should be used for a given font. This can be useful for creating more vibrant and visually appealing text, especially when using color fonts. To use the font-palette property, you first need to identify the name of the palette that you want to use. You can do this by checking the font's metadata, or by using the @font-palette-values at-rule. Once you know the name of the palette, you can simply specify it as the value of the font-palette property.

Initial value: normal
Applies to: all elements and text. It also applies to ::first-letter and ::first-line.
Inherited: yes
Computed value: as specified
Animatable: discrete
JavaScript syntax: object.style.fontPalette

Syntax

font-palette: normal | light | dark | <palette-identifier>

Values

normalSpecifies 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.
lightSpecifies 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 as normal.
darkSpecifies 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.

Example

CSS

@media (prefers-color-scheme: dark) {
  .banner {
    font-palette: dark;
  }
}

Browser Support

The following table will show you the current browser support for the CSS font-palette property.

Desktop

101	101	107	87	15.4

Tablets / Mobile

101	107	70	15.4	19	101

Last updated by CSSPortal on: 31st December 2023

Support Us