Google Welcomes First Colour Fonts to Google Fonts

Design | |

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

Nabla

Inspired by isometric computer games, this font allows you to create smooth gradients and blended shadows.

View Nabla font here

Code inspired by & credit to Scott Kellum

Bungee Spice

Bolder than the other fonts that we’ve explored, Bungee Spice uses thick, uppercase letters with colour gradients to stand out.

View Bungee Spice font here

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.

View Reem Kufi Ink font here and Reem Kufi Fun font here

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.

View Aref Ruqaa Ink font here

Amiri Quran

This Arabic and Latin typeface uses colour to reflect printed versions of the Koran Arabic typeface.

View Amiri Quran font here

Cairo Play

This weight-variable font is based on a calligraphy style font – Kufi. The angular shapes make it more contemporary.

View Cairo Play font here

Blaka Ink

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.

View Blaka Ink font here

Noto Color Emoji

This open source font covers all your emoji needs, with 21 new emojis, with the ability to customise them all.

View Noto Colour Emoji font here

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.

Headshot of Rebecca young new team member

Rebecca

Rebecca helps to keep the team organised and supports all of our clients with day to day activities and content. She also runs all of Ballyhoo's internal marketing.