Help Center
>
Getting Started
>
Using custom fonts in your animated SVGs

Using custom fonts in your animated SVGs

SVGator offers you all the fonts available in the Google Fonts library to create SVG animations, including all of their styles and variants. If a font style (eg. bold or italic) is not available at Google, you can still apply the styling to your text, using the B and I buttons. In most cases, browsers are able to apply the styling without an external font file.

Custom fonts

You can also add your own fonts, following the instructions below:

  1. If you want to add a custom font family, write its name in the search field of Fonts and choose the red suggestion that pops up.
  2. You will be able to use your custom fonts in your project, but it is not possible to automatically load them into the SVG.
  3. To make sure that other viewers will see the same font you have chosen, you will need to manually import them to your website on which you will use your SVG.
  4. If you skip step 3, the viewers who don’t have your custom fonts installed, will be displayed a default font instead.
SVGator custom fonts

Font file embedding options

You have 3 font embedding options: embed, external and do not include.

  • Embed: the font file will be added directly to your SVG, so it can be used in offline mode too
  • External: the font file will be loaded from Google's CDN. This means that your SVG can be used only with internet connection, but your server load will be lower and the SVG will load faster
  • Do not include: the font will not be included in the SVG. Choose this option if you already have the font included on the website you want to use your SVG.
    *Note: if you open your SVG file separately, you might have the impression that the fonts don’t look good. However, once you have placed it on your page, where the font is imported, all the text will look fine.

Tip: For web applications we encourage you to use the Do not include option for the best performance, in case your custom font which is used inside the SVG animation, is already included on your page.

More articles:

Animate on scroll

Animate on click

Still got questions? Send us an email to contact@svgator.com and we will get back to you as soon as we can.