A beginner’s guide to using Google Fonts

Tags: , , , &


In this part 2 of our web typography series, we profile why Google is all over web design, what Google Fonts are, how to use them and our favourite Google Font combinations.  Don’t forget to also check out Top 6 tips for choosing fonts for your website and Introduction to Icon Fonts.

Google’s role in web design

Traditionally Apple have been at the forefront of design and technology innovation, but look out Apple as Google’s taken heed. At their annual I/O conference in June Google unveiled a new cross platform design language called Material Design, a guideline which will encourage designers and developers to contribute toward a consistent look-and-feel across all platforms. It’s left the tech industry abuzz.

The aim of Google’s Material Design manifesto is to create a visual language that blends classic principles of good design with the innovation and possibility of technology and science. We predict that this is going to contribute to a more design centric web, as well as beautifying mobile and our go-to Google’s products.

Google Design – check out Material Design

Google Design – check out Material Design

In the Material Design style specification you can read about principals for colourtypographyicons and imagery. Sections within the typography guide address best practice for contrast, type size, line height, line length, hyphenation, as well as tracking and kerning – with visual examples and thorough descriptions.

With this fantastic typography guideline at the ready the real challenge for designers and developers is in selecting the right typeface for the job. Presenting: Google Fonts!

What exactly are Google Fonts?

Google Fonts (which actually launched in 2010) is an interactive directory of free hosted web fonts released under the free software licenses SIL Open Font License 1.1, and Apache License. What does that translate to? Free and functional fonts for you to use now, right now. This very moment! They are available and at the ready.

How to use Google Fonts on the web

There’s no need to download the font to use it on your webpages. To embed your collection into your web page, copy the code as the first element in the <head> of your HTML document. If you know the name of the font family you’re after follow the steps below.

  1. To determine what URL to use in your stylesheet link, start with the Google Fonts API base URL: http://fonts.googleapis.com/css
  2. Then, add the family= URL parameter, with one or more font family names and styles. Replace any spaces in the font family name with plus signs (+). To request multiple font families, separate the names with a pipe character (|).
  3. The Google Fonts API provides the regular version of the requested fonts by default. To request other styles or weights, append a colon (:) to the name of the font, followed by a list of styles or weights separated by commas (,). The final element might look something like this:
  4. Add the font name to your CSS styles just as you’d do normally with any other font. For example:
    h1 { font-family: ‘Tangeribe’, Arial, serif; font-weight: 400; }

For more information and examples check out this useful reference from Google Developers. For browser-specific behaviour see technical considerations.

If you’re using a framework such as Zurb Foundation it’s best to edit the default type-setting by adjusting the SCSS Variables. Pop the link tag into your HTML as directed above, then navigate to your _settings.scss file, search for ‘TYPOGRAPHY’ and adjust the CSS as desired. Check out the Foundation docs for more information.

How to use Google fonts on Desktop applications:

Three ways to implement Google Fonts locally:

  1. Download the font families in your Collection as a .zip file
  2. Sync Google fonts to your desktop using SkyFonts, where your favourite fonts will be automatically synced and ready to use on your device.
  3. Download all font families, including source files, at the Google Code Project.

Great pairings of Google Fonts:

There’s a multitude of tools and references out there which claim to help designers pair their fonts. The overload of often conflicting information can be overwhelming. Some designers will swear by the ‘rules’, others will tell you to break them.

Font pairing principals and recommendations:

  • A san-serif body copy paired with serif header is one of the most popular go-to font combinations you’ll see on the web. It’s a safe way to create interest and distinguish features on a page.
  • Avoid font combinations that are too similar. For example you don’t want to mix fonts from different families of the same classification, such as two slab-serif fonts.
  • Stick to one mood or personality in the typography of a single page.

Check out Best Practices of Combining Typefaces on Smashing Magazine for more info.

Technicalities aside we recommend that you approach typography as an art, rather than a science. To make the job easier and to provide a bit of a canvas we’ve curated our favourite typography resources which are ideal for a web design workflow.

Type We Like

Typewelike is a visual showcase of beautifully formated Google Fonts. Like the layout you see? Just click through, or hover to see which font is in use.

Arvo font example from Typewelike

Arvo & Open Sans font example from Typewelike

Prototyping in Typecase

Sometimes you just need to see a font in action before you can really take a stance on it. Throw design theory out the door and take a stab at trial and error. This is where Typecase comes to play. There’s no training wheels.

No need to download or install fonts, no need to alter your html, no copy/paste, no tedious searching for files. Just select your font from the drop-down. There’s useful previews for when you don’t yet know what you’re looking for – just pick a flavour! And boom, instantly formated just the way you need, whether that be H1, H2, paragraph or list. You can dig right in and adjust the CSS, and then download that too.

Quickly preview fonts for clear design decisions

Quickly preview fonts for clear design decisions in Typecast

People who have viewed this post also viewed

Leave a comment

* Required fields


Please enter the CAPTCHA text