How to Utilize Google Web Fonts to Enhance Your Visual Content

Frank Isca
Posted by Frank Isca on February 12, 2013

Old_typewriterWhether you're a designer or not, as a marketer you should have appreciation for good design work. Especially in this new marketing age of visual content and the increasing role visual content has as part of your Inbound Marketing efforts. A key factor in creating this attention-grabbing content is the use of fresh and appealing fonts, and how you pair various fonts to emphasize your message. But without spending gobs of money on fancy font packages what's a marketer to do on a limited budget? Welcome to the world of free fonts from Google Web Fonts!

You may be thinking, aren't Google Web Fonts intended for what they're named -- the web? Yes, but Google is kind enough to allow you to also download them from their collection of over 600 font families (some better than others) and install them on your computer as part of your font library. Cool, right?! 

With over 400 options to choose from, you can easily spend hours upon hours finding just the right font for your particular project. And then deciding on an appropriate font pairing can take additional time. Being who they are, though, Google has made it extremely user-friendly to both find your desired font, preview how that font would look for your particular content, and review recommended font pairings. Here's an overview on how to get started.

FONT SELECTION

From the main Google Web Fonts home page you can start to filter font options using the filter options on the left side of your screen to review only font types (serif, sans serif, etc.) and from there you can filter by font thickness/weight, slant and width. It's also helpful to filter by "popularity" or "trending," which is in the top tool bar.

The default preview mode is set to "Sentence" with a preloaded sentence, but you can easily change this sentence to test specific copy for your particular project.

Another helpful preview mode is "Poster," which allows for faster browsing of multiple font options. You can't customize the preview text in this view but the font name gives you a good idea of its appearance.

Once you begin to find some font options you like, simply click the "Add to Collection" button, which will keep all your selections in queue for downloading as one zip-file.

FONT PAIRING

If you need a little assistance with some font pairing recommendations for a particular font you've selected, Google's got your back! From your particular font selection, select the "Pop out" link. From here you can preview recommended font pairings with your font selection as the header or paragraph text (see image below). You can also preview the full character set as well as usage statistics in the "Pop out" view.

Pop_out_view

FONT DOWNLOADING & INSTALLATION

After you've assembled your collection of font options, look for the "Download your Collection" link in the upper right of your screen. You'll at first see a message stating "You do not need to download the font to use it on your webpages. Instead, refer to the "Use" section." You can ignore this since you're planning to use the fonts in your desired design program or graphic editor, as part of your computer's font library. 

What you'll want to click on is the link that says "Download the font families in your Collection as a zip-file." This will provide the TrueType Font (.TTF) file(s). Depending on your specific computer here's instructions on how to install these .TTF files.

How to download .TTF files for Mac

How to download .TTF files for Windows

ADDITIONAL GUIDANCE

When using a combination of font types, it's important to not overdo it. Stick with two primary font families (either a sans serif and serif, or combination of either one) and then work within the variations within that family (bold, semibold, italic, etc.)

If you're looking for some quick recommendations on specific Google Web Font selections, I've included some helpful blog articles here that will help you get started with finding the font you've been looking for. Have fun!

10 Great Google Font Combinations You Can Copy

10 More Great Google Font Combinations You Can Copy 

Best 20 Webfonts from Google Web Fonts

A Beginner's Guide to Pairing Fonts

Prepare your website for inbound success with this checklist 

Topics: Content Marketing

click here to take the state of industrial sales and marketing survey