Using Fonts in SVG
October 28, 2018 · Thomas Yip
Software Development Director · Everything SVG · Web Design
A year after SVG 1.0 was introduced back in 1999, SVG fonts was introduced with the intention to allow designers to design SVG graphics with any fonts they like and have them showing up correctly on the browser. But 18 years later, 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, 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 the 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 the SVG standard was first devised, web fonts usage was not easily accessible among browsers causing typography issues. Initially, SVG fonts were designed 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 exhaustive, 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;
}
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>
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!
Thomas Yip
Software Development Director
As the creator and founder of Electra Cloud, which is now known as Capital Electra X, he introduced the market to an innovative, disruptive, and fully cloud-native electrical CAD solution. The driving force behind Capital Electra X, he is committed to shaping the future of easy-to-use Electrical CAD software development. Find him on Linkedin.
