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:

Francois One Google Custom Web Font

2. Include the relevant Google stylesheet call:

<link href="" rel="stylesheet" type="text/css" />


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') +
    wf.type = 'text/javascript';
    wf.async = 'true';
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(wf, s);

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.


2 Responses to “Free TypeKit alternative: Google Web Fonts review”

  1. Goomena says:

    I swear, I had to read the "cultured coconut milk" sentence about five times until I realized you were just showing off the font. I guess I need more coffee. Thanks for the great post!

  2. TechnicalPhil says:

    Lol to the previous comment!

    I tried out the Google ‘Oswald’ font on my website. However the anti-aliasing subsequently failed when viewing the site from Chrome. Uninstalled it and everything worked OK. Go figure!

Speak your mind

To prove you're a person (not a spam script), type the security word shown in the picture. Click on the picture to hear an audio file of the word.
Click to hear an audio file of the anti-spam word