The first colour fonts have landed on Google Fonts – and they’re something you definitely need to check out.
The nine new colour fonts allow you to customise colour palettes, add gradients and more.
Colour Fonts vs Traditional Fonts
Colour fonts enable colour specification within the font file, meaning one glyph can have multiple colours. Most existing fonts are non-colour fonts, and only specify where colour goes, and glyphs can only be one colour. Colour fonts however, allow you to customise the colour further. A great example of this is emojis.
Colour typefaces are the future of fonts – they allow users to express themselves and communicate with others.
What is COLRv1 Font Format?
COLRv1 allows you to make highly customisable typefaces. COLRv1 is a binary vector format which means fonts can scale without becoming pixelated and file sizes stay compact. It is available on Chrome and Android.
With the addition of these fonts, the Google Fonts API has added support for the following:
- Gradients – you can use CSS gradients within the typefaces
- Colour Palettes – there’s multiple colour palettes to choose from, and these can also be customised
- OpenType Variations – you have the ability to add variable axes
9 Colour Typefaces
Inspired by isometric computer games, this font allows you to create smooth gradients and blended shadows.
Code inspired by & credit to Scott Kellum
Bolder than the other fonts that we’ve explored, Bungee Spice uses thick, uppercase letters with colour gradients to stand out.
Reem Kufi Ink & Reem Kufi Fun
These fonts are Arabic and Latin alphabets, inspired by calligraphy. They use colour gradients to portray the image of ink flow that is used in traditional calligraphy.
Aref Ruqaa Ink
Again, this font uses the Arabic and Latin alphabets, designed in a calligraphy style using colour gradients for a hand-drawn design.
This Arabic and Latin typeface uses colour to reflect printed versions of the Koran Arabic typeface.
This weight-variable font is based on a calligraphy style font – Kufi. The angular shapes make it more contemporary.
This font differs from the above, as it is more angular than smooth. The thick, overlapping strokes and gradient colour scheme make for a bold font.
Noto Color Emoji
This open source font covers all your emoji needs, with 21 new emojis, with the ability to customise them all.
We think that these fonts will allow designers to create attractive graphics and give us more freedom in our work. Want to stay up-to-date with the latest design news? See our guide to the best design newsletters to subscribe to here.