October 28, 2018 · SVG · Web · Fonts

Using Fonts in SVG

A year after SVG 1.0 was introduced back in 1999, SVG fonts was introduced with intention to allow designers to design SVG graphics with any fonts they like and have the fonts showing up correctly on the end user browser. But 18 years later now, how is the support for fonts in SVG and what’s the best practice for getting fonts to work properly in SVG?

SVG fonts is no longer supported by Chrome, Firefox nor IE. To get your fonts showing up well in SVG, it is recommended to use web fonts instead.

Proliferation of high resolution screens drives an increased amount of designers and developers to start adopting SVG in their responsive web design workflow. With the time savings it offers, Vector based graphic begins to gain its spotlight in the tech industry.

Of course, in order for SVG graphics to play a bigger role in the web design scene replacing PNGs, it is an absolute must to have great typography support for SVGs. We all know this best, the facepalm moments when having our fancily designed fonts in our SVG graphics appearing up as Times New Roman on end user browser. So how can we ensure our fonts are rendered reliably on any browsers and what are the ways to achieve it? And how to start bullet-proofing our SVG typography?

There are currently 3 different ways to use fonts in SVG.

Using SVG fonts

When SVG standard was first devised, web fonts usage was not easily accessible among browsers causing typography issues. SVG fonts plan to solve that by providing a means to describe a font to be used in SVG.

The usage is done by embedding glyph information into SVG when rendered. SVG fonts are defined using <font> element.

<font id="Font1" horiz-adv-x="1000">
    <font-face font-family="Super Sans" font-weight="bold" font-style="normal"
               units-per-em="1000" cap-height="600" x-height="400"
               ascent="700" descent="300"
               alphabetic="0" mathematical="350" ideographic="400" hanging="500">
        <font-face-src>
            <font-face-name name="Super Sans Bold"/>
        </font-face-src>
    </font-face>
    <missing-glyph><path d="M0,0h200v200h-200z"/></missing-glyph>
    <glyph unicode="!" horiz-adv-x="300"><!-- Outline of exclam. pt. glyph --></glyph>
    <glyph unicode="@"><!-- Outline of @ glyph --></glyph>
    <!-- more glyphs -->
</font>

And using it is as simple as referencing it in your element presentation or inline attributes or styling attribute.

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
  <font>
  <font-face font-family="Super Sans" />
  ...
  </font>
</defs>
<text font-family="Super Sans">My text uses Super Sans</text>
</svg>

Pros: It offers maximum flexibility, allowing you to customize your fonts glyphs directly in the code, with options to even customize kerning for your fonts.

Cons: SVG fonts are only supported in certain browsers such as Safari and Android. It is not supported in Chrome and Firefox. This basically means that SVG fonts no longer have cross-browser support and should not be used on the web.

Using web-safe fonts

Using web-safe fonts ensures fonts in SVG is displayed in most major systems and this is by far the easiest approach.

<svg xmlns="http://www.w3.org/2000/svg" height="285px">
    <!-- Sans-serif -->
    <text x="50" y="50" font-family="Arial">Arial</text>
    <text x="100" y="50" font-family="Arial Black">Arial Black</text>
    <text x="205" y="50" font-family="Helvetica">Helvetica</text>
</svg>

Every operating systems such as Window, MacOs, Android, iOS, etc comes with a list of built-in system fonts. Web safe fonts are fonts that are shared among all platforms or systems. As you can probably tell that the common fonts shared between these OS are not many, so it is usually used with a fallback system in place. If the first font isn’t supported by the browser, the next font will be rendered instead.

    p {
        font-family: Arial, Helvetica, sans-serif;
    }
Examples of web-safe fonts
Examples of web-safe fonts

Pros: Ease of use, simply by declaring the font-family property with the fonts of your choice.

Cons: You have to pre-identify those web safe fonts using this site and select fonts for your design from there, taking into considerations of your targeted audience OS and your overall design language. Some compromises have to be done, especially when the amount of fonts are pretty limited and there is not much choice especially for creative individuals looking for more fonts.

Using web fonts

Using web fonts is by far the best way to ensure cross-browser support in SVG with support from Microsoft IE6 all the way to the latest browsers. With the rising number of service providers for web fonts such as Google fonts, Font Squirrel, etc., using web fonts in SVG has never been easier. All you need is an ‘@import’ with the respective fonts URL to be inserted into your SVG.

<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100">
    <defs>
        <style>
            @import url("https://fonts.googleapis.com/css?family=Roboto:400,400i,700,700i");
        </style>
    </defs>
    <style><![CDATA[svg text{stroke:none}]]></style>
    <text x="20" y="50" font-family="Roboto">Roboto</text>
</svg>
Examples of web fonts by Google Fonts
Examples of web fonts by Google Fonts

Pros: Wide selection of fonts available. There’s more than 900 fonts in Google, and rest assured, the list will continue to grow.

Cons: If you’re using SVG just as a static image using <img> tags, it is not allowed to access to externals link sources and in this case, the specified @import Google font files URL. But this can be easily negated by using Nano to embed optimized fonts into your SVG so it works well on any browsers, while maintaining a small SVG file size.

This should covers all the available methods of using fancy fonts in your SVG. Comment below on your common practices of using fonts in SVG and if there’s any best practices to share!

Like the article? Give the author some claps.

Share it with your friends!
AUTHOR

Neel Singh

Software Engineer at Vecta.io, always wear black shirt, tech geek.

Creating a diagram?

Introducing the world's first SVG editor with javascript based plugins

Learn more...

RELATED POSTS

The definitive guide to CSS styling order

Ever wondered why your CSS does not apply and require the important keyword instead? Or why SVG editors uses inline attributes instead of CSS style sheets? Read on to find out how styling methods affect what's being applied to your elements.

December 01, 2018 · SVG · Web · PNG

Responsive images using SVG instead of srcset

It used to be, if you embed an image onto your website, that will be the end of the story. But with the proliferation of high resolutions displays, webmasters all over the world are scrambling to update their websites with high-res images using srcse...

October 25, 2018 · SVG · Web

How to create a customized vector background for your website within 1 minute

Searching high and low to get a vector background for your website? Want to get a vector wallpaper quick but don’t want to be paying for stock vector graphics? You can now create a vector background like below for yourself in less than 1 minute! ...