Hands-On Guide to Color Fonts and @font-palette-values
A practical guide to color fonts (COLRv1 font format) available on Google Fonts, covering everything from figuring out which color palettes are available in a font to using @font-palette-values in your CSS.
🖇 Links
Color Fonts Codepen Demo: https://codepen.io/ZoranJambor/pen/XW...
Color Fonts on Google Fonts: https://fonts.google.com/?coloronly=true
Wakamai Fondue: https://wakamaifondue.com/
Can I Use: https://caniuse.com/?search=font-pale...
📖 Timestamps
00:00 Intro
00:24 How to use color fonts available on Google Fonts
01:56 How to get info about available color palettes in a color font
02:48 How to use @font-palette-values to select a palette from a color font
04:27 How to override colors in a color font
05:18 How to use a different font palette for a dark mode
06:29 Browser support for color fonts (@font-palette-values)
06:51 Conclusion
#css #googlefonts
A deep dive into the most popular CSS linting tools:
🔥 Mastering Prettier & Stylelint: https://masteringlinting.com/
Subscribe to CSS Weekly Newsletter:
💌 https://css-weekly.com/
Keep up-to-date with CSS Weekly:
👉 Twitter: / cssweekly
👉 Instagram: / cssweekly
👉 Facebook: / cssweekly
Keep up to date with what I'm up to:
🔗 Blog: https://zoranjambor.com
👉 Twitter: / zoranjambor
👉 LinkedIn: / zoranjambor
Zoran Jambor
