Subscribe to Tutorial Feed

Flash and PHP Bible

The Flash and PHP Bible has been released! The book can be found on Amazon or wherever fine books are sold in your area.

The Flash and PHP Bible has a forum for quick support.

Scriptplayground » tutorials » css » Quick Look at the Google Font API

Quick Look at the Google Font API

A quick look at the Google Font API

View an Example of this article before you get started.

In this tutorial we will take a quick look at the Google Font API which was recently announced at Google IO.

I am sure you're already saying "huh? What is this, another Google tool?". Exactly, Google has given us as CSS/HTML users the ability to embed fonts directly into our work without storing the font. However the pure magic is this even works in older browsers as all of the heavy lifting is on Google.

Alright, enough "what it is", lets get to the fun part, the code.

The magic in this process is the simplicity of the code. For example, in order to use a font such as Lobster, as shown in figure 1. Use the following code.

<html>
  <head>
    <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Lobster">
    <style>
      h1 {
        font-family: 'Lobster', Arial, serif;
        font-size: 40px;
      }
    </style>
  </head>
  <body>
    <h1>Rock Lobster!</h1>
    <p>Special CSS fonts thanks to Google Font API!</p>
  </body>
</html>

Seriously, thats all the code it takes to use a custom font in your site. Visit the Google Font Directory for a list of fonts you can use. I am sure Google will continue to add fonts, so check back often.

As you can tell this concept is simple, straightforward and takes about 20 seconds to implement. That shouldn't detract from the "behind the scenes" power this concept has. Of course custom fonts is one of them, but a more important advantage is caching. The font file is on Googles server, so your server doesn't have to store/load the file(s) for each user.

I hope you have enjoyed this quick tip. If you have comments or questions, please post them below.

Follow Scriptplayground on Twitter (@scriptplay)

Comments: Quick Look at the Google Font API

 Cbuckner  Wed Aug 11, 2010 4:43 pm  
That is awesome! How I never heard about this is beyond me, but I am excited to give it a shot and test out their fonts. Man, Google Rocks!
 Abhijit V. Chaore  Fri Aug 13, 2010 7:15 am  
Gr8. But didnt it increase one http request?
Add a comment
The ability to add new comments has been disabled in this archived version.

Loading
Main | Tutorials | Articles