Effortlessly Add Amazing Fonts To Your Website

Google's Web Font service has been around for a while now, but in the last few months the company's been working hard to optimise and simplify its use. If you're an old-school developer like me, you've probably stuck to classics like Tahoma, Verdana and Arial. Now, with modern browsers that better follow W3C standards and the chunky bandwidth of today's internet, there's really no reason to limit yourself.

If you're worried about compatibility, don't be. As Google's FAQ on the service points out, Web Fonts has excellent support for all popular browsers:

What browsers are supported? The Google Web Fonts API is compatible with the following browsers:

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+

Does the Google Web Fonts API work on mobile devices? The Google Web Fonts API works reliably on the vast majority of modern mobile operating systems, including Android 2.2+ and iOS 4.2+ (iPhone, iPad, iPod). Support for earlier iOS versions is limited.

Getting the fonts you want is straightforward. Point you browser to the font selection section of the site and peruse the catalogue of 489 fonts. A preview of each font is available; customisation options include tweaking the font size and preview text.

Once you've found one you like, you can use it immediately by clicking the "Quick-use" button for the font in question. You'll be redirected to a new page showing you the code you need to paste into your website's element. Hopefully the pages on your site share a header file, so this shouldn't be difficult to sort out. Otherwise, you will have to add it to each page manually.

For example, if you wanted the font Pontano Sans, all you have to do is add the following link tag to the head section of your website:

Then, you can use the font in your CSS markup like you would any other font:

Hello world!

If you're running Wordpress, this would go into your theme's header.php file. Alternatively, there are a number of plug-ins that can automate the process.

Adding fonts in this way does have an impact on the performance of your site, but the impact is negligible, especially if you limit yourself to just a few fonts (you shouldn't need more than two or three, at most).

Considering the other options for adding non-web safe fonts to a site -- via PHP image generation or creating the titles manually as PNGs or JPEGs in Photoshop or GIMP -- by comparison, the Web Font API is completely painless.


    It's a shame so much of the Google Web Fonts library is ugly to the point of being useless for anything other then demoing the fact that you can, in fact, use the font-face @rule.

    Unfortunately all the alternatives that offer genuinely good fonts charge truly exorbitant amounts for it making them unsuitable for small personal pages.

      Or you can use a service called Cufón (http://cufon.shoqolate.com/generate/) which allows you to generate JavaScript from any TTF file to use on your site.

Join the discussion!