July 20, 2018 · SVG · Web · Diagramming

You Can Now Use Google Fonts in Vecta

When you’re drawing diagrams or illustrations in Vecta, sometimes you find yourself wanting to use some of your favorite fonts in your drawings. Now you can. Google fonts is now available in Vecta, and you have more than 800 font families to choose in Vecta!

How to use Google Fonts in Vecta?

In addition to default fonts in Vecta, you can now add any Google Fonts into your own fonts selection list! Start by clicking the custom menu in your font selection list, and then inserting the Google Fonts URL into the field. Click OK, and your new font is added into Vecta!

Adding Google fonts in Vecta.io
Adding Google fonts in Vecta.io

An Easier Alternative

Or directly from Symbol Search, you can find all the fonts listed in this drawing:

Most used Google Fonts in 2018
Most used Google Fonts in 2018

Drag and drop them into your drawing, and they will be automatically added into your fonts list.

We’ve made all the popularly used Google Fonts as our symbols to save you more time instead of manually inserting them one by one.

How it looks like after exporting your drawing?

Google fonts used in your drawings will look exactly the same even after exporting it to SVG. Vecta has integrated font embedding feature from Nano, so the custom fonts used in your drawings will be rendered properly and guaranteed to work on any browsers and devices.

Google Fonts after exported to SVG
Google Fonts after exported to SVG

To embed fonts, you’ll need to select Compress SVG when exporting your drawing, and Vecta will do the heavy lifting for you - Compress and Embed fonts at the same time, so your SVG will be well optimized for web usage. Small footprints, save bandwidth and faster loading time! Long gone are the days of downloading and installing font files on your PC just to get nice fonts.

We added Google Fonts in Vecta to help you illustrate your ideas better visually, so please let us know what you think after trying it out!

Like the article? Give the author some claps.

Share it with your friends!
AUTHOR

Yi Qian

CXO at Vecta.io. 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...

RELATED POSTS

The definitive guide to CSS styling order

Ever wondered why your CSS does not apply and require the important keyword instead? Or why SVG editors uses inline attributes instead of CSS style sheets? Read on to find out how styling methods affect what's being applied to your elements.

December 01, 2018 · SVG · Web · PNG

Responsive images using SVG instead of srcset

It used to be, if you embed an image onto your website, that will be the end of the story. But with the proliferation of high resolutions displays, webmasters all over the world are scrambling to update their websites with high-res images using srcse...

October 28, 2018 · SVG · Web · Fonts

Using fonts in SVG

A year after SVG 1.0 was introduced back in 1999, SVG fonts was introduced with intention to allow designers to design SVG graphics with any fonts they like and have the fonts showing up correctly on the end user browser. But 18 years later now, how ...