Apparently, multicolored typefaces on the web are a thing. You can use and modify them in CSS.

@font-face {
font-family: ‘Rocher’;
src: url(‘/blog/2023/100daysof-day76/RocherColorGX.woff2’);
}
@font-palette-values –pink {
font-family: ‘Rocher’;
base-palette: 1;
}
@font-palette-values –green {
font-family: ‘Rocher’;
base-palette: 2;
}
@font-palette-values –gray {
font-family: ‘Rocher’;
base-palette: 9;
}
[data-sample] h1 {
font-family: ‘Rocher’;
font-size: 6rem;
margin: 0;
}
.sample2 h1 {
font-palette: –pink;
}
.sample3 h1 {
font-palette: –green;
}
.sample4 h1 {
font-palette: –gray;
}

@font-face {
  font-family: 'Rocher';
  src: url('/fonts/RocherColorGX.woff2');
}

h1 {
  font-family: "Rocher";
}

Pretty cool, right? What’s even cooler is that color fonts come with a default color palette and optionally with a set of alternative palettes that you can access via CSS.

In order to use a different palette, you have to reference and associate it with a font using the @font-palette-value rule. Within the rule, you assign a palette using the base-palette property. The value is an index, starting at 0 (default palette). Rocher comes with 11 palettes, which means that you can assign values between 0 and 10.

@font-palette-values --pink {
  font-family: 'Rocher';
  base-palette: 1;
}

@font-palette-values --green {
  font-family: 'Rocher';
  base-palette: 2;
}

@font-palette-values --gray {
  font-family: 'Rocher';
  base-palette: 9;
}

To use a palette, you use the font-palette property and reference the name you’ve defined in the @font-palette-values rule (You pick the name, it’s not predefined).

h1 {
  font-palette: --pink;
}

h1 {
  font-palette: --green;
}

h1 {
  font-palette: --gray;
}

My blog doesn’t support comments yet, but you can reply via [email protected].