How to Use Color Fonts on the Web

On Jul 10, 2018

Every web designer knows how to set a font’s color, right? It’s one of the first things we do when we begin learning CSS. We choose a color, then we use styles to set it, like color: blue; or color: purple;, so all the glyphs in our chosen font turn that color, and only that color.

But what if you could define more than one color per glyph? What if you could make your letters blue and purple, or have gradients running between blue and purple, or even have half a dozen colors or more applied to a single font family?

Well, with the emergence of Open Type color fonts, you can do just that.

Check out this image of four different color fonts:

This might look like fixed images put together in Illustrator, but you’re actually looking at live, editable, search engine readable text in a browser.

Rather than having their color controlled via CSS, these fonts have internal information that allows them to have multiple colors per glyph, making for a pretty striking display.

Using Color Fonts

Color fonts are still quite new so there hasn’t been a massive number of them released just yet, and among those that are available there’s a mix of free and paid fonts. To make sure you can play around with color fonts yourself, I picked out four free fonts for our demo. You can grab copies of these fonts at the following locations:

Gilbert on typewithpride.com
Abalone on colorfontweek.fontself.com
Playbox on colorfontweek.fontself.com
Bixa on bixacolor.com

The code used to add them to the page is nothing new, it’s just the plain old @font-face you know and love:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Color Fonts</title>
	<style>
	@font-face {
		font-family: 'Gilbert';
		src: url('fonts/Gilbert-Color Bold-Preview_1004.otf');
	}
	@font-face {
		font-family: 'Abalone';
		src: url('fonts/Abelone-FREE.otf');
	}
	@font-face {
		font-family: 'Playbox';
		src: url('fonts/Playbox-FREE.otf');
	}
	@font-face {
		font-family: 'Bixa';
		src: url('fonts/NTBixa-Color.woff2');
	}
	body {
		font-size: 4.5rem;
		line-height: 1.618;
	}
	.gilbert {
		font-family: 'Gilbert';
	}
	.abalone {
		font-family: 'Abalone';
		font-size: 3.8rem;
	}
	.playbox {
		font-family: 'Playbox';
	}
	.bixa {
		font-family: 'Bixa';
	}
	</style>
</head>
<body>
		<a class="gilbert">Gilbert Color Font</a>
		<div class="abalone">Abalone Color Font</div>
		<div class="playbox">Playbox Color Font</div>
		<div class="bixa">Bixa Color Font</div>
</body>
</html>

Browsers and Support

At this moment in time, if you want to try out color fonts in the browser you’ll need to use either Firefox or Edge, the only two browser with full support. Safari limits support to SBIX format only. Chrome has support only on Android, and then just for CBDT format. Opera has no support at all.

7 Ways To Improve Core Web Vitals Scores & Page…

Nov 6, 2020

10 Best Payment Gateways for eCommerce in 2020

Nov 1, 2020

CSS Modification

At the moment we can’t use CSS to change the colors that are used within a color font. However, it is possible for a font designer to ship a font with a number of preset variations included. Those variations can then be modified by using the property font-feature-settings.

We can see this functionality in action via Robin Rendle’s demo of the Trajan Color font from TypeKit.

Colors Are Fixed, Even on Links

As the colors of a color font are fixed inside the font itself, the color property you usually apply to your text will have absolutely no effect, including on links, whatever their state.

It’s also worth being aware that while no color change will occur with links, they can still have their default underline text decoration applied, and that the underline will receive any color you specify through your CSS. If you decide to combine color fonts and links, it might be worth using such an underline to help users distinguish links from the rest of the text.

Here’s some example code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Color Fonts</title>
	<style>
	@font-face {
		font-family: 'Gilbert';
		src: url('fonts/Gilbert-Color Bold-Preview_1004.otf');
	}
	body {
		font-size: 4.5rem;
		line-height: 1.618;
	}
	.gilbert {
		font-family: 'Gilbert';
	}
	a {
		color: red;
	}
</head>
<body>
		<div class="gilbert">Gilbert Color <a href="#">Link</a></div>
</body>
</html>

This will give us the red underline seen here on the last word:

Wrapping Up

Between color fonts and variable fonts, the newest developments for Open Type look to be making fonts in the browser much more fun and interesting. The future of web design typography looks bright!