CSS font-palette Property

If this site has been useful, we’d love your support! Consider buying us a coffee to keep things going strong!

Description

The font-palette property controls which of a color font’s built‑in palettes is used when rendering glyphs that are designed with multiple palette options. Many modern color fonts include several predefined palettes (for example to provide different looks for emoji or branded icons), and font-palette lets authors request one of those palettes so that the glyph layers map to the palette entries the designer expects. It operates only on fonts that expose palette information; for ordinary monochrome fonts it has no effect.

In practice you pair font-palette with a specific font chosen via font-family so you’re sure the requested palettes exist, and you still use the regular color property for non‑color glyphs and as a fallback. Designers use font-palette to switch between variants (for example a light and dark themed palette or a brand's alternate colorways) without changing the glyph shapes. Because the palettes are provided by the font, the property maps glyph paint layers to the font’s palette entries rather than generating new colors from scratch.

Considerations around accessibility and theming are important: pairing font-palette with page-level context like background-color helps ensure sufficient contrast, and it’s good practice to provide sensible fallbacks in case the chosen font or palette is not available. font-palette can also be used alongside typographic controls such as font-variation-settings or font-feature-settings when a font offers both color palettes and variable or feature-based glyph variants; however, palette selection remains a font-driven mapping, so it won’t recolor arbitrary content the way image or CSS compositing operations do. Keep critical information independent of palette-only differences so content remains understandable if a user agent falls back to a monochrome rendering.

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
Animatable: yes
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

HTML

<div class="container">

    <h1>font-palette demo</h1>

    <p class="line">Default: <span class="emoji default">😀 ❤️ 🔥</span></p>

    <p class="line">Palette 1: <span class="emoji pal1">😀 ❤️ 🔥</span></p>

    <p class="line">Palette 2: <span class="emoji pal2">😀 ❤️ 🔥</span></p>

    <p class="note">Note: your system font must support color palettes (for example: "Segoe UI Emoji", "Noto Color Emoji").</p>

</div>

CSS

/* Define named palettes that map to palette indices provided by the color emoji font */
@font-palette-values PaletteDefault {
    font-family: "Segoe UI Emoji";
    palette: 0;
}

@font-palette-values PaletteWarm {
    font-family: "Segoe UI Emoji";
    palette: 1;
}

@font-palette-values PaletteCool {
    font-family: "Segoe UI Emoji";
    palette: 2;
}

/* Page styling */
body {
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    background: #f7f7fb;
    color: #111;
    padding: 2rem;
}

.container {
    max-width: 680px;
    margin: 0 auto;
}

h1 {
    font-size: 1.25rem;
    margin-bottom: 1rem;
}

.line {
    margin: 0.75rem 0;
    font-size: 1rem;
}

.emoji {
    font-size: 2rem;
    line-height: 1;
    vertical-align: middle;
    font-family: "Segoe UI Emoji", "Noto Color Emoji", "Apple Color Emoji", "Twemoji Mozilla", "EmojiOne Color", sans-serif;
}

/* Apply different named palettes to each inline emoji set */
.emoji.default {
    font-palette: PaletteDefault;
}

.emoji.pal1 {
    font-palette: PaletteWarm;
}

.emoji.pal2 {
    font-palette: PaletteCool;
}

.note {
    font-size: 0.85rem;
    color: #555;
    margin-top: 1rem;
}

Result

Editor

Browser Support

The following information will show you the current browser support for the CSS font-palette property. Hover over a browser icon to see the version that first introduced support for this CSS property.