Color fonts allow font designers to merge multiple color layers into one font file and assign a color to each layer. Support for variable color fonts is pretty good, you might find some discrepancies with rendering between the browsers. Check out my post on Using color fonts for more information on the technical usage with CSS.

There aren't a whole lot of variable colour fonts available right now, but lets take a look at some that are available and what you can do with them (in no particular order).

Rocher Color Henrique Beier

Color variable font Rocher in pink shades creating a blocking style with a dark blue shadow

Rocher Color is an experimental variable color font with 2 axes (bevel and shadow), it comes with 11 color palettes built in (but you can always create your own as well). The font was inspired by Merit Badge, a variable color font designed by David Jonathan Ross (featured below).

Rocher colour is a great example of a font that complete obliterates the need for layering text effects on the web. The font has bevel and shadow built in meaning that with this font I no longer have to use heavy, complex text shadows, or layer multiple versions of a font to achieve the effect. It's just available for me to use as a regular font.

It's a wonderful font, and a lot of fun to work with.

Henrique has a great post about The Making of Rocher Color if you're interested in reading more about the process.

Get Rocher Color - Free

Merit Badge By David Jonathan Ross

Font merit badge, blue color with light blue outline, has open ends like a pipe sitting on a gradient dark teal background

Merit badge by David Jonathon Ross, was the second variable colour font ever made (cool hey). It has a weight axis which adjusts the thickness of the outlines and a custom axis called 'sans' which allows you to adjust the serifs (full, none or somewhere in between).

It comes with one built in colour pallette with pink yellow and blue, but you can change this to suit your needs with the CSS property font-pallette, or use the customiser available on David's site.

It's a little quirky and sort of has that 'gaspipe' feel, perfect for text effects or if you want to have something stand out in your designs.

Get Merit Badge - Trial, Paid/Commercial

Nabla By Arthur Reinders Folmer, Just van Rossum

Color variable font Nabla in pinks and purples, rotated slightly with 3d highlights with a mustard background

Nabla, available on Google Fonts, is inspired by vintage computer games and features a depth and highlight axis allowing you control over gradients highlights and blended shadows. It utilises the new the COLRv1 color-font format which enables the gradient features in the font.

You can use this font via Google Fonts, but you can also get it directly from the Typeature website and make use of the customiser to create your own masterpiece. Alternatively you can use one of the 7 pre-built colour palettes within the font.

What I love about this font is just how perfectly it's been executed, its exceptionally clean, and detailed. It really is a stunning font, and with such hard work put into it there is really nothing left to do as far as text effects go! It's perfect.

Get Nabla - Free

Foldit Sophia Tai

Color variable font Foldit in blue and teal with paper folds in font, background is dark blue

Foldit is an absolutely stunning font available on Google Fonts, this kind of paper folding texture is very well sort after in text effect land and frankly it's really hard to make with regular fonts. So having the style built directly into the font is incredible.

It has a single axis where you can control the weight, making it very thick or very thin, by default it's set to greyscale, but you can control the colour palette using the font-palette property to any colour scheme you need for your projects.

Get Foldit - Free

Gimme By Arthur Reinders Folmer

Font Gimme version with mechatron and connects
ont gimme version with roads and trains

Last but certainly not least is Gimme by Arthur Reinders Folmer. Arthur makes hands down the most incredible colour variable fonts you will ever see in your life. Gimme is everything.

It's an ever-growing, ever evolving type family of multi-chromatic and variable display typefaces. From transformers to constructo to playing cards. The font was inspired by a box full of toys and it certainly delivers.

It truly is an interesting, fun, creative application of variable colour fonts which combine not just the great technology but also push the boundaries of what we expect from fonts. It moves more into illustration than what you'd traditionally expect, and I think it's absolutely incredible. Arthur truly is a master of the variable colour fonts.

Get Gimme - Paid/Commercial