What is Colorfont.js?

We wanted to be able to develop and use multi-coloured fonts on the web, and so Colorfont.js was born. It's a tiny library that allows you to have text in more than one colour without resorting to ugly hacks or images, retaining the advantages of using text.

We also made available a set of colorfonts to be used with this library.

How do I use this in my website?

First, get colorfont.js and include it inside your page's element, like so:


        <script type="text/javascript" src="colorfont.js" />
      

Now, let's say you have a heading,


        <h1>Hello Colorfont!</h1>
      

where you would want to use coloured fonts. All you have to do is give it the "colorfont" class:


        <h1 class="colorfont">Hello Colorfont!</h1>
      

That's it?

Almost! Behind the scenes, a second element will be created on top of the existing one using the "overlay" font, thus creating the multi-color effect.

Image demonstrating how colorfonts are combined

However, we need to set up our CSS so that the browser knows which fonts to use. For the headings on this website, we'd first define the fonts we want to use inside the CSS file (see below for Colorfont-ready fonts):


      @font-face {
        font-family: 'Din OSP';
        font-weight: normal;
        font-style: normal;
        src: local('Din OSP'), url('fonts/din.woff') format('woff');
      }

      @font-face {
        font-family: 'Din Overlay';
        font-weight: normal;
        font-style: normal;
        src: local('Din Overlay'), url('fonts/dinoverlay.woff') format('woff');
      }
      

Afterwards, you just need to specify how the headings should look:


      h3.colorfont {
        color: #aaa;
        font-family: 'Din OSP' !important;
        font-size: 3em;
      }

      h3 .colorfont-overlay {
        color: #ccc;
        font-family: 'Din Overlay' !important;
      }
      

And remember, if you use CSS properties like padding or line-height in a .colorfont element don't forget to repeat the same values for .colorfont-overlay!

Why colorfonts?

Designers have long been making typographic experiments using more than one color, but the monochrome limitations of digital fonts don't make this too easy.

In mid 2011, Dave Crossland commissioned us to develop a simple Javascript library for displaying multi-coloured fonts, and Eben Sorkin inspired us with the typographic experiments of Art Deco designers like Fix-Masseau or A.M. Cassandre.

We set out to create a set of overlays to existing fonts that could effectively enable their use in colour. We based ourselves on existing libre fonts — the natural choice, since proprietary fonts always forbid redistributing modified versions.

Download

More?

We are hosting Colorfont workshops to expand the collection of colorfonts.
Check the results of the Colorfont Workshop at LGM 2012