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!
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.
OpenType-SVG is supported by several browsers and software packages. *Compatability is constantly improving, so this list may not be fully updated!
|Adobe Photoshop||YES||Since cc 2018|
|Adobe Illustrator||YES||Since cc 2018|
|Microsoft Word||No||Not yet :(|
|Affinity Designer||No||Not yet :(|
|Pixelmator||No||Not yet :(|
|Sketch||No||Not yet :(|
|Microsoft Edge||YES||Since version 38 on Windows 10|
|Firefox||YES||Since version 26|
|Safari||No||Not yet :(|
|Chrome||No||Not yet :(|
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.
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.
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.
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.
Let's find out! Get in touch at hello[at]fonts.lol