Easy Implementation of Google Web Fonts

This week Google announced their new web font directory.  Instead of relying on users to have special fonts or resorting to using images, Google makes font replacement super easy with their new open source tool.  I’ve had moderate luck with sIFR in the past, but I like Google’s solution better.  I implemented it on my website this morning, and it couldn’t have been easier.

1. Add this line of code to the HEAD of your HTML page.  Be sure to grab the code appropriate to the font you want.  This example uses Droid Sans.
2. Reference the font name in the font stack wherever you want to use the Google web font (ex: font-family: ‘Droid Sans’, Verdana …).  In my case, I applied it to the entire page.

The only thing I don’t like is the font shift when the page loads for the first time.  This plagues all replacement techniques, but Google’s caches well and doesn’t seem to affect subsequent visits.  In my experience, the sIFR solution shifts on every page load which is a deal-breaker.

photo credit: Sunfox

Let me know what you think in the comments.