Google Font Directory
Taking a look at the Google Font Api has been on my to do list for some time now. I took the time the other night to play around with the fonts a little on one of my projects. The font directory is an interesting idea and I'm curious to see if the project grows quickly. I liked a several of the current fonts in the directory though found them to look a little aliased in certain browsers.
I found the easiest way to implement the font to be using the @import function at the top of your stylesheet. The following example shows how to load the Vollkorn font family.
url(http://fonts.googleapis.com/css?family=Vollkorn);
Two add multiple font families you can separate the fonts with a pipe character. Use the plus character to replace spaces in font families that contain them.
To load a specific font variant you can use the following format.
url(http://fonts.googleapis.com/css?family=IM+Fell+English:italic);
Once you have loaded one or more font families you can call them like a traditional font in your stylesheet.
You can control the font that loads initially while the site visitor is downloading the web font to display. This is one interesting behavior with the web fonts over traditional fonts. I think this could be a nice resource if the number of high quality fonts in the directory continues to grow.
Comments
@James - I definitely agree about the display quality of the Google fonts. They just don't look as good as they should. Cufon looks like an interesting option, does it work fine across all browsers? I'll have to definitely check it out.
Pretty much... https://github.com/sorccu/cufon/wiki/Browser-Support They are also actively working to ensure that it works with IE9.
James, nice clarification. But do you agree that Google font offer is limited? Have you tried to use Dragr tool to create custom embeddable free fonts and preview it for HTML5: htt://labs.thecssninja.com/font_dragr/ (via @font-face embed)
Google Font offer limited? Yes... regarding the number of fonts that they can offer without getting sued. :) I think the big perk with using Google Fonts (versus your own custom fonts) would be their CDN and the chance that your visitors may have already downloaded that font while visiting another website.
Another alternative is Cufon. It's a little different though and I use it only for header elements. It's extremely easy to use. It turns your text into a canvas element graphic and doesn't require Flash (like sIFR did) so it renders really nice on mobile WebKit. http://cufon.shoqolate.com/generate/ I like how the Google Fonts are still "text", but the display quality has not been acceptable to any of my clients yet.