August 30, 2018 · How To Vecta

5 Great Reasons You Should Be Using Google Fonts to Design SVG Images

Great typography adds to a great design. But oftentimes, getting a decent custom fonts showing up properly on screens comes at a price, either with extra effort or compromising in quality or even both.

We experimented to find out the best way to work with fonts and came up with a flawless and efficient workflow by using Google Fonts in our design work. Time saving, top notch quality and most of all, simple!

Why Google Fonts?

1. It has more than 800 open source font families, about enough to forget about Typekit fonts licensing

The best thing about open source is of course, there’s no licensing concerns and its ‘open-door’ accessibility, allowing users to use it anywhere - both on print and web. The dominos effect it brings is this - any applications (i.e., Nano) or browsers can access to the font files used in your SVG via Google API, meaning there’s basically no risk of losing your fonts on your website or design.

Gone are the days of having to inform your clients that it's going to cost more because you’re using a Typekit font in your design! With Google Fonts, there’s no explanation required, and no licensing issues to worry upon. Simply download the fonts you need from Google, install and use it straight away in Illustrator! Also, you can easily manage and get all the latest updated fonts from Google using a Font manager like SkyFonts. A HUGE time saver!

2. No more missing fonts

In Google Cloud pricing summary page, the fonts in its SVG image are designed to be Roboto. But this is what happens when fonts are not taken care after exporting SVG graphics:

Times New Roman on Google Cloud Storage page
Times New Roman on Google Cloud Storage page

What happens is that Google’s favorite font - Roboto is not embedded into the SVG, resulting in the fonts displayed to be defaulted into visitors’ system fonts - Times New Roman in this case if Roboto isn’t available locally.

Most SVG editors (i.e., Illustrator and Sketch) will not automatically embed fonts into SVG when you export. And if you’re using SVG just as an image, embedding it using <img> tags, it wouldn’t be able to access external resources such as Google’s font files due to security concerns.

So you’d either have to change the way you embed your SVG image or use Nano to embed fonts into your SVG file. Since Nano is able to access to Google Fonts API, it’s able to get your font file, optimize and embed it straight into your SVG.

The result is, your fonts will stay exactly the same as your original design! Less work done!

3.Goodbye to blurry fonts! And enjoy ClearType fonts rendering

Using fancy custom fonts, when hit export as SVG in Illustrator, you’re sure to select ‘Convert to Outlines’ in the SVG Options dialog:

SVG export options in Illustrator
SVG export options in Illustrator

Currently, converting fonts to outlines is the only fastest and sure-work way to ensure your fonts appear to be the same across every devices as illustrated in CSS-Tricks:

Export SVG from Illustrator article in CSS Tricks
Export SVG from Illustrator article in CSS Tricks

And in Sitepoint:

Export SVG from Illustrator article in Sitepoint
Export SVG from Illustrator article in Sitepoint

But outlined fonts look blurry especially on low-res screens. Most operating systems will optimize fonts (like ClearType subpixel rendering on Windows) to ensure they are shown clearly and sharp on all screens, and since your fonts have been converted to paths, no optimizations will be applied.

So the difference between outlined fonts and normal fonts is obvious:

Outlined fonts on top, normal fonts at the bottom
Outlined fonts on top, normal fonts at the bottom

With Google Fonts, you can now keep Fonts in your exported SVG file, without converting it to outlines.

Depending on the way you’re embedding your SVG, if you’re using inline or <object> tags to embed your SVG, simply insert @import Google fonts API after exporting SVG without outlining fonts, and your fonts will be rendered properly across any devices.

If you’re using <img> tags instead, simply drag and drop your file into Nano and get your fonts embedded into your SVG.

4. Keep your fonts accessible, searchable, editable after export

Say you’ve got a design with fonts like this:

Sample SVG from Illustrator
Sample SVG from Illustrator

Upon exporting SVG from Illustrator, your fonts which are converted to outlines looks like this:

Text converted to outlines SVG
Text converted to outlines SVG

Making it almost impossible to dive right into the codes and identify the fonts characters, if you’re trying to animate or style them using external CSS.

Now by using Google Fonts, you get to keep your fonts in SVG during export:

Fonts in SVG
Fonts in SVG

With this, you can easily identify the fonts characters in your codes, dive right in to make changes even after exporting it as SVG. Typos can be resolved right away in your codes. Your fonts no longer lose its accessibility, searchability and copy-ability!

5. Enjoy EVEN smaller SVG file sizes!

Aside from being resolution independent, SVG is known to have smaller file size for simple graphics, improving web performance. Outlining fonts when exporting SVG converts your fonts into a waterfall of numbers representing the coordinates of paths in the codes (as shown above), loading up the file size by far. It's just unjustifiable to have a large SVG file size for the sake of getting fonts to show up properly, as it defeats the purpose of using SVG at the very first place.

By using Google Fonts and keeping fonts as SVG during export, your file size stays minimal.

With that, you can either opt to go for using <img> tags or <object> tags to embed your SVG file. Go through Nano to further compress your SVG and have your fonts well taken care of.

By now, you should be able to imagine how much file size this could save you!

With Google Fonts, you get to maintain text fonts in your SVGs. With Nano, you get to embed optimized Google Fonts into your SVG and compress! Utilizing both ensures that our fonts work well and images load speedily on any device!

Like the article? Give the author some claps.

Share it with your friends!

Yi Qian

CXO at Solving problems with people for people by connecting dots between brains, over a cup of coffee.

Creating a diagram?

Introducing the world's first SVG editor with javascript based plugins

Learn more...


October 08, 2019 · How To Vecta

Introducing SVG flattening for laser and vinyl cutting

SVG editing for vinyl cutters and laser engravers just got much easier with Vecta's new feature - SVG Flattening. This feature is made possible with Vecta's user - John Robinson's feedback and input, thanks John!

October 25, 2018 · How To Vecta

How to create a customized vector background for your website within 1 minute

Searching high and low to get a vector background for your website? Want to get a vector wallpaper quick but don’t want to be paying for stock vector graphics? You can now create a vector background like below for yourself in less than 1 minu...

August 23, 2018 · How To Vecta

Supercharge Vecta’s functionality with JavaScript based plugins

Vecta is more than just a normal browser-based SVG editor, it's especially powerful when you have all the flexibility you need to make the most out of the platform. Plugins can drastically change the way you work, saves time and enhances producti...

Keep yourself updated with the latest development on SVG, Web development, CSS and Javascript. BETA