Day 76: overwriting colors in font palettes

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

My blog doesn’t support comments yet, but you can reply via blog@matuzo.at.


This content originally appeared on Manuel Matuzović - Blog and was authored by Manuel Matuzović

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

My blog doesn't support comments yet, but you can reply via blog@matuzo.at.


This content originally appeared on Manuel Matuzović - Blog and was authored by Manuel Matuzović


Print Share Comment Cite Upload Translate Updates
APA

Manuel Matuzović | Sciencx (2023-01-09T00:00:00+00:00) Day 76: overwriting colors in font palettes. Retrieved from https://www.scien.cx/2023/01/09/day-76-overwriting-colors-in-font-palettes-2/

MLA
" » Day 76: overwriting colors in font palettes." Manuel Matuzović | Sciencx - Monday January 9, 2023, https://www.scien.cx/2023/01/09/day-76-overwriting-colors-in-font-palettes-2/
HARVARD
Manuel Matuzović | Sciencx Monday January 9, 2023 » Day 76: overwriting colors in font palettes., viewed ,<https://www.scien.cx/2023/01/09/day-76-overwriting-colors-in-font-palettes-2/>
VANCOUVER
Manuel Matuzović | Sciencx - » Day 76: overwriting colors in font palettes. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2023/01/09/day-76-overwriting-colors-in-font-palettes-2/
CHICAGO
" » Day 76: overwriting colors in font palettes." Manuel Matuzović | Sciencx - Accessed . https://www.scien.cx/2023/01/09/day-76-overwriting-colors-in-font-palettes-2/
IEEE
" » Day 76: overwriting colors in font palettes." Manuel Matuzović | Sciencx [Online]. Available: https://www.scien.cx/2023/01/09/day-76-overwriting-colors-in-font-palettes-2/. [Accessed: ]
rf:citation
» Day 76: overwriting colors in font palettes | Manuel Matuzović | Sciencx | https://www.scien.cx/2023/01/09/day-76-overwriting-colors-in-font-palettes-2/ |

Please log in to upload a file.



There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Related Posts