Free TypeKit alternative: Google Web Fonts review

First published on July 22, 2012

Fonts for websites has long been a complex issue. There are a few standard fonts that most visitors will have. Straying outside of that set of fonts brings up challenges of: load time and Flash dependency (with sIFR), licensing and complexity (with Cufon), maintainability and bad SEO (with images), or cost (with TypeKit).

Google Web Fonts is a free alternative that currently has 501 open source fonts to choose from. It’s not the perfect solution, but it is compatible with most browsers (going back to Internet Explorer 6+ and Firefox 3.5+, for example) and very easy to install on a website.

1. Select a font or fonts to use on the Google Web Fonts site, such as Francois One:

2. Include the relevant Google stylesheet call:

<link href="http://fonts.googleapis.com/css?family=Francois+One" rel="stylesheet" type="text/css" />

or:

Include the relevant Google JavaScript call:

<script type="text/javascript">
  WebFontConfig = {
    google: { families: [ 'Francois+One::latin' ] }
  };
  (function() {
    var wf = document.createElement('script');
    wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
      '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
    wf.type = 'text/javascript';
    wf.async = 'true';
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(wf, s);
  })();
</script>

3. Use the font in your stylesheets as per normal:

#header h1 { font-family:"Francois One", "Century Gothic", "Trebuchet MS", "Arial Narrow", Arial, sans-serif; }

Note that you should always use a list of fonts to provide fallback options if the technology and/or fonts are not supported.

One of the drawbacks of Google Web Fonts is what is commonly called “flash of unstyled content” — for some visitors, site elements will show in a fallback font before the selected font style is applied.

Facebook Twitter Email this

This entry is filed under Web development tutorials, WordPress and written by Peter Keung. You can follow any responses to this entry through the RSS 2.0 feed.