Day 76: overwriting colors in font palettes
posted on
It’s time to get me up to speed with modern CSS. There’s so much new in CSS that I know too little about. To change that I’ve started #100DaysOfMoreOrLessModernCSS. Why more or less modern CSS? Because some topics will be about cutting-edge features, while other stuff has been around for quite a while already, but I just have little to no experience with it.
You can use the override-colors
property to override colors in a font palette.
Color fonts come with one or more predefined color palettes. You can select them by using the font-palette
property. You can also define your own color palettes or change specific colors in a palette using the override-colors
property.
@font-face {
font-family: 'Rocher';
src: url('/fonts/RocherColorGX.woff2');
}
h1 {
font-family: "Rocher";
}
That's the default font palette of the “Rocher” font.
Jurassic 5
Using the @font-palette-value
rule you can create a new font palette. You reference the typeface you want to create the palette for using the font-family
property. Color palettes of the “Rocher” font consist of 4 colors. We can override colors by defining the index (starting with 0) of the color and a valid color value.
@font-palette-values --custom {
font-family: 'Rocher';
override-colors: 0 #a13908;
}
h1 {
font-palette: --custom;
}
The Pharcyde
You don't have to start at 0, you can override any color.
@font-palette-values --custom {
font-family: 'Rocher';
override-colors: 2 #a13908;
}
Del the Funky Homosapien
Here's a custom palette based on the colors of my code syntax highlighter.
@font-palette-values --custom {
font-family: 'Rocher';
override-colors:
0 rgb(21, 58, 81),
1 rgb(255 215 0),
2 rgb(84 159 167),
3 rgb(128, 210, 219);
}
A Tribe Called Quest
You can also use another base palette and override colors.
@font-palette-values --custom {
font-family: 'Rocher';
base-palette: 1;
override-colors: 0 #9e4356;
}
MF DOOM
Further reading
- COLRv1 and CSS font-palette | CSS-Tricks
- Wakamai Fondue, the tool that answers the question “what can my font do?”
- Day 75: font palettes
Do you want to learn even more awesome CSS?
I'm running a workshop with my friends at Smashing Magazine in which I introduce you to the most useful modern features in CSS and show how you can implement them today in your code base to improve scalability, maintainability, and productivity.
Learn more about the workshop!
Overview: 100 Days Of More Or Less Modern CSS