The New Font API From Google

yk-fwebde

Google has just recently released a new font API, which will greatly help to simplify the usage of fonts on the web. It is called, of course, Google Font API. Included with this API is the font directory, along with an interactive font preview.

The Google Font API makes it extremely simple to use external fonts on the web, with its directory of open source fonts.

The Google Font API is based on @font-face, which has already been in use for quite some time for embedding external fonts on a website. But one of the great things about the Google Font API is supported by many browsers, even our favourite browser, IE6! Unfortunately, this will not currently work on Android, iPhone, iPad, or iPod (or Opera).

Using the Google Font API

Getting started with the Google Font API is actually really simple. It basically takes only three steps to include a font in your site.

Step One

Browse the Google Font Directory, and pick one you like. For the purposes of this article, I decided to go with Yanone Kaffeesatz.

Step Two

Add the correct code into the head section of your website, to include the CSS required to import the font. When using the font directory, Google will give you all the code you need to be able to use the font you want. For Yanone Kaffeesatz, this is the code that it gave me:

<link href='http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz' rel='stylesheet' type='text/css' />

Step Three

Once you've included that line of code in between your site's head tags, you can now use the font you've selected in your CSS just like any other font. Just in case if anything goes wrong, I've also decided to include a couple of fallback fonts.

.foo {
    font-family: 'Yanone Kaffeesatz', Arial, serif;
    /* All your other CSS properties here
       or above, doesn't matter */
}

Because text using fonts included using the Google Font API are simply treated as normal text, you can also style your fonts however you like, such as with things like text shadows. Just make sure you don't go too far; I think we all know what it looks like when hundreds of styles are applied to a single block of text.

Currently the selection of fonts is rather limited, but hopefully this will improve over time, as more and more fonts are added to the directory.

So to conclude this post, here is an example of Yanone Kaffeesatz, one of the fonts included in the Google Font API.

The Yanone Kaffeesatz font, used at FWebDe!

Stay Updated

Did you enjoy this post? Don't miss a single post by getting free updates!

7 Comments

  1. Andrew
    May 20, 2010

    As of at least Opera 10.53, it works

  2. May 20, 2010

    Sooner or later, there will be schools owned and operated by Google. Count on it.

    • May 21, 2010

      I think it's already started to happen...

  3. July 3, 2010

    I wonder what happens when the server is temporarily down. I've had this issue with some Google API codes before. I guess it's not possible to access the fonts locally...

    • July 3, 2010

      Well, I believe the fonts are cached in the browser when they're accessed. If the server is down, there might not be a problem for those who have it cached, but those who don't might have some problems.

      But you can always specify these fonts using font-family, and add a fallback or two, just in case the first one doesn't work.

Trackbacks/Pingbacks