Zedric Myers

Working with Google Web Fonts

Est. Reading Time: 2 minute

Using Google Web Fonts is a great way to integrate nice web fonts that aren’t the standard. There are a large variety of fonts with settings to choose from.  Within the Google Font website, you can search, filter font types, preview a word, sentence, paragraph, change scripts, sort options and add or remove from your collection. It’s very easy to apply to your website with a simple CSS style link and CSS font code snippet supplied by Google.

To get started, go to http://www.google.com/webfonts

  1. Select the desired font or fonts with settings they offer and click “Add to Collection”.
  2. Click “Use” in the bottom right of the website. Note: Once here, you will see the “Page Load” impact it will have on your site. So the less font selections the better, unless necessary.
  3. Embed your Collection into your web page, copy the code as the first element in the <head> of your HTML document.


Example from Google:

      <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine">
         body {font-family: 'Tangerine', serif; font-size: 11px;}
      <div>Making the Web Beautiful!</div>

You call also add the font CSS to your external CSS style sheet for a single reference.

h1 { font-family: 'Tangerine', serif; font-size: 11px;}


That’s all there is to it on using Google Web Fonts.