← Back to release summary

font-palette and custom @font-palette-values palettes

Category
CSS
Type
Chromium catches up
Status
In developer trial (Behind a flag) (Chrome 101)
Intent stage
Prepare to ship

Summary

The font-palette CSS property allows selecting a palette from a color font. In combination with the @font-palette-values at-rule, custom palettes can be defined. Use cases: designs where an icon or emoji font is used in combination with dark or light mode, or multi-colored icon fonts that are colorised using font-palette to harmonise with the content's color scheme. font-palette increases efficiency of color font uses, as no server roundtrip is needed for changing the colors of the font.

Motivation

font-palette amplifies the utility of COLR/CPAL color font support that we already shipped. Palette styling provides the missing link between CSS styling and the colors that are in the font. An icon font can be made to match the content's color scheme. Use cases such as Plakato Color Grade (https://underware.nl/fonts/plakato/features/color/) no longer need a server round-trip to regenerate a new font.

Standards & signals

Samples: Plakato Color Grade (currently polyfilled): https://underware.nl/fonts/plakato/features/color/

View on chromestatus.com