Day 76: overwriting colors in font palettes

posted on 09.01.2023

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