Day 75: font palettes

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.

11 palette each with 4 colors
The font “Rocher” comes with 11 palettes

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ć

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.

11 palette each with 4 colors
The font “Rocher” comes with 11 palettes

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ć


Print Share Comment Cite Upload Translate Updates
APA

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/

MLA
" » Day 75: font palettes." Manuel Matuzović | Sciencx - Friday January 6, 2023, https://www.scien.cx/2023/01/06/day-75-font-palettes/
HARVARD
Manuel Matuzović | Sciencx Friday January 6, 2023 » Day 75: font palettes., viewed ,<https://www.scien.cx/2023/01/06/day-75-font-palettes/>
VANCOUVER
Manuel Matuzović | Sciencx - » Day 75: font palettes. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2023/01/06/day-75-font-palettes/
CHICAGO
" » Day 75: font palettes." Manuel Matuzović | Sciencx - Accessed . https://www.scien.cx/2023/01/06/day-75-font-palettes/
IEEE
" » Day 75: font palettes." Manuel Matuzović | Sciencx [Online]. Available: https://www.scien.cx/2023/01/06/day-75-font-palettes/. [Accessed: ]
rf:citation
» Day 75: font palettes | Manuel Matuzović | Sciencx | 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.

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