New Google Fonts API Experiment

(Note, if you are viewing this on the main blog page .. To see this with its Google font magic, you have to go to the post page, here.)

This is pretty badass, IMHO. This text is 100% selectable, live text.

From http://code.google.com/apis/webfonts/docs/getting_started.html#Quick_Start:

So that’s all I’ve done here.

This text is fully selectable!

I’ve used Chris Coyer’s code to insert a custom per-post stylesheet¬†here.

I did a bunch of tests in CrossBrowserTesting.com, and sure enough it works. The areas where it did not work were:

  • Opera
  • FireFox 2 & 3.0x
  • Ubuntu Konqueror

Not bad. What’s totally amazing is, it works in IE 6:

Google Fonts IE 6

Here are some page weight tests from YSLow.

Before:

YSlow Before

YSLow After (fonts API added):

YSlow After

So the additional weight is insignificant, it seems to me.

You can use all of Google’s web fonts for free, and you can also use TypeKit’s fonts through the same interface.

Posted in

Chris