Uploaded October 2022 | Updated September 2026, 1 hour ago

---

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: codepen.io/ZoranJambor/pen/XWqPJVW/9872a3c5ae33cbd2963ebcda7779b93f
Color Fonts on Google Fonts: fonts.google.com/?coloronly=true
Wakamai Fondue: wakamaifondue.com
Can I Use: caniuse.com/?search=font-palette-values

📖 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: masteringlinting.com

Subscribe to CSS Weekly Newsletter:
💌 css-weekly.com

Keep up-to-date with CSS Weekly:
👉 Twitter: twitter.com/CSSWeekly
👉 Instagram: instagram.com/cssweekly
👉 Facebook: facebook.com/CSSWeekly

Keep up to date with what I'm up to:
🔗 Blog: zoranjambor.com
👉 Twitter: twitter.com/zoranjambor
👉 LinkedIn: linkedin.com/in/zoranjambor

- Zoran Jambor