Using a custom web fonts in *.svg
Posted: November 2nd, 2018 | Author: Julia | Filed under: Development, Tips and Tricks | Tags: *.svg, font-family, text, vector | No Comments »Like any vector graphic, SVG file can contain text. To declare your font just use a simple font-family attribute:
-
<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
-
<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:
