As you might have see, Google now offers a full webfont API. Luckily, they let me dig into the service and code a few weeks back. So let me give you the lowdown on the features and what you can do with it…
Here’s adding a @font-face declaration for Tangerine, a nice scripty font:
You’ll then reference it
font-family:Tangerine and be all set. As for something a bit more complicated:
There’s Inconsolata regular, italic and bold-italic and Droid Sans regular.
Obviously there are huge caching benefits to using the Google Font API, plus they’re very focused on performance and you can expect things to be fast and FOUT to be minimized. But on the topic of FOUT…
Let’s say you want Firefox to not have the FOUT, but rather mimic webkit’s behavior of invisible text until the font is loaded:
1 2 3 4 5 6 7 8 9 10 11 12 13 14
The WebFont Loader API provides some classes on the
Check out all the WebFont demos, showing off all its capabilities. One of my favorite parts is that you can use the events and hooks it provides with your very own hosted fonts (in that demo I load Taggeschrift from paulirish.com).
Ask any questions in the comments and I’ll do my best to clarify. :)