About design and nearby

Using a custom web fonts in *.svg

Posted: November 2nd, 2018 | Author: | Filed under: Development, Tips and Tricks | Tags: , , , | No Comments »

Like any vector graphic, SVG file can contain text. To declare your font just use a simple font-family attribute:

  1. <text fill="#51BBE3" font-family="'Your font-family'" font-size="60">‘Meow’ means ‘Woof’ in cat</text>

Everything is fine if you set a system font, but how to deal with custom fonts? Even if you have loaded your required font-family into the project and use

  1. <text fill="#51BBE3" font-family="'Your custom font-family'" font-size="60">‘Meow’ means ‘Woof’ in cat</text>

– this does not always work. For example, if your SVG file is embed in a html file – check it yourself:

HTML page with *.svg

And if you open SVG in a browser separately the font loads properly and displayed correctly:

Standalone *.svg

To avoid such issue I use
– a html object tag instead of an img tag to apply the full range of xml inclusion methods and
– CSS @font-face to reference remote (or included into the project) fonts:

  1. <style type="text/css">
  2. <![CDATA[
  3.  @import url('https://fonts.googleapis.com/css?family=Lobster');
  4.  text {
  5.  font-family: 'Lobster';
  6.  }
  7. ]]>
  8. }
  9. </style>

and my font-face element of SVG is

  1. <text fill="#51BBE3" font-size="60" style="font-family: 'Lobster'; font-weight:normal; font-style: normal">‘Meow’ means ‘Woof’ in cat</text>

For the HTML file itself:

  1. <object data="text-svg-final.svg"></object>

See the difference now :)

Share Button

Check Related Posts:

Leave a Reply

  • 3 + = four

Looking for a Freelance UX & UI designer for your project? I’m ready to jump onboard!

Let's discuss your project now