Spice up your site with Google font API

Google font apiWith the new Google Font API you can easily create nice text effect on your site without using graphics. Making nice text effects on the web, normally requires creation of graphical images that contains the text, since only a few fonts are universally supported across different browsers and operating systems.

Text as images has the advantage of great control over the end result in the users browser, but also the problems with potentially slower download times due to the size of the image containing the text effect, and less flexibility in maintenance since changes to the text means creating a new image.

In this post we’ll take a look at the Google Font API, that offers a new solution to nice fonts on the web.

Google Font API background

Google Font API lets you display nice fonts on your website, that are widely supported by browsers and operating systems, by adding a few lines of CSS to your site.

The magic behind Google Font API is serving individual style sheets, specially optimized for each user agent. In theory you could do this yourself, but it’s a lot of work, since you need to understand font behavior across browsers and operating systems, to get a decent support in various environments.

This work has been done in Google Font API, so you can concentrate on your site.

Simple example

<html>
 <head>
 <link href='http://fonts.googleapis.com/css?family=Droid+Sans'  rel='stylesheet' type='text/css'>
 <style>
 h1 {
 font-family: 'Droid sans', serif;
 font-size: 36px;
 }
 </style>
 </head>
 <body>
 <h1>Droid is a new exiting web font!</h1>
 </body>
</html>

To embed fonts from Google Font API in your page you need to add a link to the Google Font web service in the <head> section of your pages.  This link can be found in line 3 in the example. The parameter family=droid+sans specifies the font that should be included on your page. You can see a list of all fonts available here

Finally you need to create a CSS class that uses the font – in this example the H1 class uses the “droid sans” font, and the you get the following result:

Example on Google Font API - Driod font

See example

Please notice that you should always add an alternative font in your CSS, so you can control what the user sees in the cases where their browser can’t display the font from Google Font API.

Loading fonts

Even if browsers supports Google Font API, there can be big difference in how the browsers loads the fonts, and hence how the user experience is going to be before the font has been downloaded. A typical fonts has a size around 25 kb. compressed.

To get better control over the browser behavior during font load, you can implement the WebFontLoader JS library from Google. One of the smart features of WebFontLoader is the possibility to display a default system font during load, and then display the nice font when it has been downloaded:

<html>
 <head>
 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js">
 </script>
 <script type="text/javascript">
 WebFont.load({
 google: {
 families: [ 'Reenie Beanie', 'Nobile' ]
 }
 });
 </script>
 <style type="text/css">
 .wf-inactive p {
 font-family: serif
 }
 .wf-active p {
 font-family: 'Nobile', serif
 }
 .wf-inactive h1 {
 font-family: serif;
 font-size: 36px
 }
 .wf-active h1 {
 font-family: 'Reenie Beanie', serif;
 font-size: 36px
 }
 </style>
 </head>
 <body>
 <h1>This is using Reenie Beanie</h1>
 <p>This is using Nobile!</p>
 </body>
</html>

See example

The “WebFont.load” function loads the specified fonts from Google. In this example it’s the two fonts Reenie Beanie and Nobile.

In the CSS, you can see that all styles that uses fonts from the WebFont script has a “wf-inactive” or “wf-active”, that tells the browser what to display is the font hasn’t been downloaded, and what to display when the font is downloaded. Using the FontLoader also gives you the possibility to use web fonts from other sources like typekit.com

Browser support

Unfortunately not all browsers is yet support by Google Font API. So before implementing the API on your site, you should take a look at the browser stats from your users.

The Google font API supports 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+

You should be specially aware with mobile websites, since Android, and users agent of mobile phones are very poorly supported.

Performance

Besides browser support, site speed is also a very important parameter. Using the Google Font API, means adding a additional CSS or JS file to your HTML which potentially can slow down your site.   If the users has been to your site before, or has visited a site that used the Google Font API, the JS, CSS and Font data will be cached, and hence site speed won’t be affected. Downloading a font is a  25kb download in average.

On the other hand, if you currently have many images that consists of texts, it might be worth considering using Google Font API, since it can reduce the http requests, and maybe also reduce the page size in kb.

Using the Google font API can also enhance the maintenance of your site since it’s easier to update content in plain text compared to content saved as images.

Saving content as plain text compared to images can also improve the SEO benefit of your site.

The visual quality is also of importance.  Before selecting any of the fonts, you should take a look at the Google Font Directory, since there is big difference between how the fonts look at different font sizes.  In general the visual quality isn’t as good as a image, but many of the fonts actually has an acceptable quality.

Conclusion

Google Font API is a interesting new offer for webmasters. The font API gives you the opportunity to stand out from the crowd and give your site a unique style.

On the other hand the quality is not good enough for all purposes, so you should experiment a little before deciding if Google Font API is the right solution for you.

ProsCons
Easier to maintain content
SEO benefits and better content searchability
Potentially smaller page size in KB
Lower visual quality compared to images
Downloading fonts and JS takes time
Limited amount of fonts
Supported by many browsers, but not all

Share and Enjoy

  • Facebook
  • Twitter
  • Delicious
  • LinkedIn
  • StumbleUpon
  • Add to favorites
  • Email
  • RSS
fold-left fold-right
About the author
Jørgen Nicolaisen has been passionately interested in everything online since 1995. His experience is based on working with small hobby projects as well as high volume websites. Jørgen is currently focused on the PHP based programming framework - Codeigniter, and WordPress naturally

3 Replies to Spice up your site with Google font API

  1. Raph Levien says:

    Thanks for the writeup and kind words!

    Actually, SVG support is already enabled, and Android support is coming soon. That wasn’t true at the time of launch, but we’re working hard on making the service better.

  2. found your site on del.icio.us today and really liked it.. i bookmarked it and will be back to check it out some more later

Trackbacks for this post

  1. Google Font API – new preview function | Tips4PHP

Comments are now closed for this article.