Google announced their new Font API yesterday, including a font directory and preview tool. They teamed up with TypeKit, to build and open source the WebFont Loader.

I quite like how they have done it. You just hotlink the CSS right from Google and then reference the font names in the CSS. It’s really easy — view source on this demo.

Why do this? Isn’t this just @font-face? Yep it is just @font-face, which you can do yourself without Google’s help. But there are advantages:

1. Bandwidth savings (weight is on Google)
2. Caching speed (same font used on multiple sites, browser cache kicks in)
3. Speed in general (Google’s CDN is faster than your site)

Loading the extra CSS file is an extra HTTP Request though, but you could hotlink the font fileno support for iPhone/iPad. instead. You may also want to download the font and create your own SVG version, because the Google stylesheets aren’t serving that up, and hence

So what is this WebFont Loader then? It’s a bit of JavaScript which handles the loading of fonts. It’s use is totally optional, but offers some advantages. For example, Firefox will display a font further down the font stack until an @font-face font is loaded, and then flip to the @font-face font when it is ready, causing reflow and general weirdness. It’s called FOUT (Flash of unstyled text). The WebFont Loader can help fight this. This link helps
http://paulirish.com/2010/details-on-the-new-google-webfont-api/