Fonts on the web have always been a single-color deal. (Even in the print world color type is a rarity.) It’s because a traditional font file contains vector shapes that have no color information and is given a default black fill when shown on the browsers.

On the web, changing color to text is straightforward. We take an element…

…and color the text inside it with CSS:

The result is something like this:

What if we want to add some more colors to our letters? Say we’d like to have the letters in dark gray, with a green shine and a pink center:

We couldn’t do that until, very recently, the SVG in Opentype technology came out.