CSS font-palette Property

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

@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
Edge Chrome Firefox Opera Safari
1011011078715.4
Tablets / Mobile
Chrome Firefox Opera Safari Samsung Webview
1011077015.419101

Last updated by CSSPortal on: 31st December 2023