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

See on CodePen

Further reading

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