• Demo

The current push in web standards now is for web fonts, which to me is pretty exciting. The ability to use more custom fonts on a project without the need for Flash (think SiFR) or imagery really helps to speak to the rapidity of current web development. Google recently released it’s and it’s related The list isn’t huge right now, but hopefully it will continue to grow. Here’s a quick overview of how to use it.

Using the Font API is actually really simple, (and that says alot considering it comes from Google). Let’s start out with a bit of basic XHTML that we want to style up

     
All Good Things...
;
     
...with your content...
     
...with your content...

There’s absolutely nothing remarkable about the code above, just a simple h1 and p tags. The only difference is the stylesheet call to Google’s Font API. One thing to note here is that while I am calling this style sheet in the head of the HTML document with a link tag, this style sheet could also be included in your project but doing an @import in your CSS file. Some may prefer to do it that way, the choice is yours.

Including the code via a link tag:

Including the code via an @import statement (in your CSS file)

@import url('http://fonts.googleapis.com/css?family=IM+Fell+English+SC');

Once you’ve got the font stylesheet loading in from Google it’s time to set up the styling in your sites css file. (for this example we are going to use a style tag, but you can do this in an external file the exact same way.

Here’s how we would style the h1 and p tags in the code snippet above to use Droid Sans. Notice that this isn’t anything different than what you are doing now when you are declaring fonts via CSS.

h1 { font-family: 'IM Fell English SC', sans-serif; font-size: 40px;}
p{font-family: 'IM Fell English SC', sans-serif; font-size: 20px; line-height: 30px;}

And you’re done. The great thing about this is that the text, stays as text. Search Engines (who are we kidding, Google) can pick it up no problem, as opposed to an image or some type of Flash text, and you can fully control the presentation via CSS.

It is possible to take this further. Let’s say you wanted to included two fonts, you could do this:

But Google has a method setup to allow you to retrieve more than one font at once, just separate them with a pipe ( | )

Also by default, Google is only going to return you the regular version of the font, however if you need to use the bold or italic version of the font, you can include it too, just request it with a colon ( : )

Google has a full table of how you can call various font variants such and bold and italic in the (towards the bottom)

All in all this is a pretty slick bit of technology. Granted there aren’t a lot of font choices currently available, but hopefully that list will grow soon.

I’ve whipped up a quick demo that you can view here:

Anyone currently using this in a production environment? Leave a note in the comments below.