CSS - font-palette Property

Quiz

The font-palette property provided by CSS allows you to specify one of the various palettes that are contained in a font.

Possible Values

normal: Sets default color palette or the glyph colorization. The palette at index 0 is rendered.
light: Sets the first palette that matches with 'light'. If no match is found, it behaves like normal.
dark: Sets the first palette that matches with 'dark'. If no match is found, it behaves like normal.
<palette identifier>: Allows a to specify your own palette using the @font-palette-values at-rule.

Applies to

All the HTML elements.

DOM Syntax

object.style.fontPalette = "normal | <palette identifier>";

CSS font-palette - Basic Example

Here is an example:

<html>
<head>
<style>
    @import url(https://fonts.googleapis.com/css2?family=Bungee+Spice);
    @font-palette-values --bungee-more-spicy {
        font-family: "Bungee Spice";
        override-colors:
        0 Orange,
        1 Yellow;
    }
    h2 {
        font-family: "Bungee Spice";
    }
    h2.more-spicy {
        font-palette: --bungee-more-spicy;
    }
</style>
</head>
<body>
    <h2>Font face</h2>
    <h2 class="more-spicy">Hot & burning</h2>
</body>
</html>

Print Page