This content originally appeared on Manuel Matuzović - Web development blog and was authored by Manuel Matuzović
Apparently, multicolored typefaces on the web are a thing. You can use and modify them in CSS.
@font-face {
font-family: 'Rocher';
src: url('/fonts/RocherColorGX.woff2');
}
h1 {
font-family: "Rocher";
}
woah!
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;
}
woah!
h1 {
font-palette: --green;
}
woah!
h1 {
font-palette: --gray;
}
woah!
My blog doesn't support comments yet, but you can reply via blog@matuzo.at.
This content originally appeared on Manuel Matuzović - Web development blog and was authored by Manuel Matuzović
Manuel Matuzović | Sciencx (2023-01-06T09:38:54+00:00) Day 75: font palettes. Retrieved from https://www.scien.cx/2023/01/06/day-75-font-palettes/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.