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
Read the rest of this entry »

Share Button

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

Let's discuss your project now