How To Use OpenType SVG Fonts
SVG Opentype fonts are gaining popularity extremely fast. We wanted to share a quick article outlining how to make the most out of your new fonts!
OpenType SVG Font Definition
OpenType-SVG is a font format in which an OpenType font has all or just some of its glyphs represented as SVG (scalable vector graphics) artwork. This allows the display of multiple colors and gradients in a single glyph. Because of these features, we also refer to OpenType-SVG fonts as “color fonts”.
OpenType-SVG fonts allow text to be shown with these graphic qualities, while still allowing it to be edited, indexed, or searched. They may also contain OpenType features that allow glyph substitution or alternate glyph styles. - Adobe
How to install
OpenType SVG fonts are installed as any normal .otf font is installed. This usually happens via FontBook for Mac users or via your preferred font manager or Control Panel in Windows.
Since this is a newer format, options are fairly limited for design software that supports OpenType SVG fonts.
The team behind FontSelf created this excellent guide over on colorfonts.wtf which shows design software that is currently compatible with SVG fonts
To see what web browsers support SVG fonts, plus a bunch of other great information, visit colorfonts.wtf
How to change the color of an OpenType SVG font
This is definitely one of the most asked questions, so we’ve outlined how to do so in the most commonly used software:
Adobe Photoshop (CC 2017+)
In Photoshop you must be in RGB color mode, and apply a color overlay. This is done by using your layers panel to add a Layer Style (fx). [Select Layer -> Layer Style -> Color Overlay]
Adobe Illustrator (CC 2018+)
In Illustrator you must also be in RGB color mode. First, rasterize your text (Object -> Rasterize with transparent background). Then change your color via the Color Balance tool [Edit -> Edit Colors -> Adjust Color Balance]
FAQ & Interesting Facts
Bitmap SVG fonts, usually hand drawn with varying texture & transparency, are not in vector format and therefore do not scale well. At large sizes they may pixelate.
In Adobe Illustrator, if you are not in RGB color mode OpenType SVG characters will appear with a black background
You can see all characters included with your OpenType SVG font by using the Glyphs panel
If you have more tips or tricks to share when it comes to using OpenType SVG fonts, comment below or send as email at firstname.lastname@example.org
Leave a comment