Web Development: How to Use Color Fonts on the Web

How to Use Color Fonts on the Web

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, and 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 OpenType color fonts, you can do just that.

Check out this image of four different free 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.

Wondering where to download color fonts? Don't feel limited by the free color fonts available. Instead, check the selection of the best color fonts for websites from Envato Elements. Scroll to the bottom of this tutorial to find out more.

Where to Get Free 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 color fonts and paid fonts.

Did you know one of the most popular free color fonts is the Gilbert font? The Gilbert font is based on the Gay Pride flag, designed by Gilbert Baker.

The Gilbert font is also known as the Rainbow color font — The Gilbert font is also known as the rainbow color font.

Gilbert Baker was both an LGBTQ activist and an artist. He was known for helping friends create banners for protests and marches. To honor the memory of Gilbert Baker after his death in 2017, the Gilbert font was created as a free color font, inspired by the design language of the iconic Rainbow Flag.

Now, to make sure you can play around with color fonts yourself, I picked out four free color fonts for our demo. You can grab copies of these fonts at the following locations:

Gilbert font 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. See the CSS color font style here:

<!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 CSS Color Font Style Support

Right now, if you want to try out color fonts in the browser, you’ll need to use either Firefox or Edge, the only two browsers with full CSS color font style 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.

CSS Color Font Style 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:

5 Best Color Fonts for Websites From Envato Elements

Wondering where to download color fonts? Don't feel limited by the free color fonts available. Instead, check out the selection of the best color fonts for websites from Envato Elements.

If you're a web or graphic designer, you'll love this subscription-based marketplace. For a low monthly fee, you get unlimited downloads of web fonts, website templates, graphic templates, and more.

Let's check out this selection and download color fonts today!

1. Mixan Bold Color Font (OTF, WOFF)

Mixan is a bold two-color font. This bright sans-serif web font features thick, rounded letters and works great for short color titles.

2. Jungle Color Font (OTF, TTF, WOFF)

Jungle is a fun pastel color font that features 52 unique characters. The Jungle pastel color font will look great on playful, childish titles.

3. Revoxa - Modern Display Color Font (OTF, TTF, WOFF)

Looking for a modern two-color font? Revoxa is a sans-serif two-color font specially created for contemporary designs.

What makes Revoxa a unique color font is that it includes three styles: regular, cuts, and lines. You can mix these layers to create the best color font for websites. This two-color font includes:

Revoxa Regular
Revoxa Line
Revoxa Cut 1
Revoxa Cut 2
Standard glyphs
Web font kit

4. Betamin - Sans-Serif Color Font (OTF, WOFF)

Betamin is a sans-serif font with rounded lines. This rainbow color font is bright and fun, and looks great on titles.

Betamin rainbow color font features capital letters in five colors. You can use it as a multi-colored font or single color font.

5. Geometricity Color Font (OTF, TTF, SVG, EOT, WOFF)

Looking to download color fonts with unique designs? Geometricity is for you. It's a geometric display two-color font. Use this really cool pastel color font for a variety of projects, thanks to its multiple formats.

Discover More About Typography

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

If you'd like to learn more about the world of web typography, we've got this complete learning guide: A-Z of Web Typography

And here's more content you can check today about web fonts, variable fonts, and SVG fonts: