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

August 30, 2018 ·  Yi Qian · Web Design · Everything SVG

Great typography adds to a great design. But oftentimes, getting a decent custom font to show up properly on screens comes at a price, either with extra effort or compromise in quality or 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?

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 domino effect is any application (i.e., Nano) or browsers can access these fonts so it can be used in your SVG, 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!

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:

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 embedding the SVG using <img> tags, access to external resources such as Google's fonts will be prohibited due to security concerns.

So you'd either have to change the way you embed your SVG or use Nano to embed fonts into your SVG.

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

Goodbye to blurry fonts! And enjoy ClearType fonts rendering

If you use custom fonts, when exporting as SVG in Illustrator, if selecting ‘Convert to Outlines' in the SVG Options dialog:

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:

And 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:

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.

Keep your fonts accessible, searchable, editable after export

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

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

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:

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!

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), bloating 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. 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!

Yi Qian

CXO at Capital Electra X/ Vecta.io. Solving problems by connecting dots between brains, over a cup of coffee.