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.

Compatibility

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 hello@pixelsurplus.com