Why Color Fonts?

Color Fonts open up a whole new world to graphic designers! Opentype-SVG fonts can include multiple colors, strokes, gradients- the works! The revolution has just begun, and soon there will be a plethora of great fonts out there. Fonts.lol was formed to push the technology and adoption of color fonts. Go download a font for free, test it out! If you like it, come back and donate a few dollars, or better yet get a full commercial license!

What is an OpenType-SVG color font?

OpenType-SVG is a regular OpenType font with SVG (Scalable Vector Graphics) embedded inside. Because SVG is vector, it will scale infinitely without losing details.

Where can I use OpenType-SVG color fonts?

OpenType-SVG is supported by several browsers and software packages. *Compatability is constantly improving, so this list may not be fully updated!

What happens if a browser or software doesn't support OpenType SVG?

The font will downgrade to a black silhouette version. *Note that in fonts such as Blockino, most letters' silhouette will just be a square.* The commercial license comes with .EPS vector files that you can open in any vector program. While you can't type with it like you can a font, you can drag and drop the letters into place!

IF YOUR BROWSER SUPPORTS COLOR FONTS, THIS WILL BE IN COLOR.
OTHERWISE, IT WILL BE A FLAT GRAY.

What are the file sizes like?

OpenType-SVG color fonts are usually slightly larger in size because of the complexity. However, the sizes are still relatively small. For example, Blockino is only 70kb, and Letterboard is only 180kb.

How do I edit the colors?

Currently, all the colors in Opentype-SVG fonts are hard coded into the font. Support for editing colors inside a software package like Illustrator or in browser CSS is still a ways off. Luckily, Fonts.lol has an incredible Color Font Generator that lets you create any color combination you want and download a new .otf file with those colors!

Also, inside of vector programs like Adobe Illustrator, you can expand the type into raw vector elements that you can easily select and change colors.

How do I use Opentype-SVG fonts in CSS?

You can embed OpenType-SVG fonts just like other fonts in your CSS. Remember that not all browsers are supported, and this is still relatively new and experimental territory.

How can I make my own OpenType-SVG font?

Try , it's an easy-to-use plugin for Adobe Illustrator and Photoshop!

Can you make me a font?

Let's find out! Get in touch at hello[at]fonts.lol