Designing With The Google Font API + 5 Free Fonts

As a designer who enjoys creating elements for web publication, it has become essential to familiarize myself with the Google Font Library. Google, the wonderful company that they are, has put together a library of fonts that designers and developers can use for free when building for web.

The Google Font API is compatible with:

• Google Chrome: version 4.249.4+
• Mozilla Firefox: version: 3.5+
• Apple Safari: version 3.1+
• Opera: version 10.5+
• Microsoft Internet Explorer: version 6+

Some Background

Not everyone has the same fonts on their computer. So, if I have a font called Parakeet on my computer’s font library and I want it to be the main font on my website, I would write this into my stylesheet:

font-family: ‘Parakeet’, sans-serif;

When I load the web page on my computer, I’m going to see the Parakeet font, but everyone else will see a generic sans serif of some sort because their computer doesn’t have that font. To solve this problem, and so everyone doesn’t have to use ‘Arial’ and ‘Times New Roman’ as their website fonts, Type Kits have been created.

Type Kit?

A type kit is a place where fonts are hosted (on the web) so your website can call upon them without actually having the fonts on their computer. Google Fonts is an example of this, but the beauty of Google Fonts is that they are completely free. Google offers hundreds of fonts that any web designer can pull from when designing a website.

If you’re designing a website and starting with a comp in Photoshop, instead of picking a random font from your computer’s library, choose from the Google Font Library to ensure that everyone viewing your site will see the correct font. Visit the Google Font Library to browse and download.

Here are a few of my favorite Google Fonts to use when creating website comps:

Headlines

Lato makes a great headline font whether you’re using its lighter weights like “hairline” or “light” or you’re using its heavier weights like “bold” and “black.” Bold italic looks great as a callout font in a paragraph of text. If you want to distinguish a link in the paragraph, the rest of the text might be set in “regular” and the link is set in “bold italic.” The letter ‘I’ has nice detailing when set in a lighter weight, ideal for adding a bit of specialness to a headline.

Subheadlines

Quattrocento Sans is a nice font for subheadlines because it doesn’t distract from the headline but stands out enough from the body copy that it doesn’t get lost. It comes in a variety of weights, although bold works best if you’re using a lighter colored font on top of a darker background (like a sidebar).

Body copy

Open sans is my favorite for body copy because it looks good no matter what you’re using it for and it’s so universal. I like to use it in all CAPS and bold in the navigation bar for excellent legibility. I also use its regular weight for paragraph text and its lighter weight for headlines.

If you’re looking for a good serif font that is easy to read in paragraph form, Sanchez is a great go-to.

Cursive

Homemade apple is nice for display text or even a subheadline here or there. I sometimes like to distinguish a heavy sans serif headline with a light cursive font underneath it to break up the text.

Do you have any good Google Fonts you like to use? Leave them in the comments below.