This site uses the Google Font API to deliver a set of open-source licensed fonts to your browser. The API determines your browser and returns a CSS file with the appropriate font format and link style that browser requires for using web fonts. All you have to do is create a link to that CSS file, and then you can refer to the fonts in your CSS file. You can read the technical details if you're really curious.
In the stylesheet for this site, there is a call to:
@import url('//fonts.googleapis.com/css?family=Lobster|Droid+Serif|Droid+Sans');
This asks the API to serve up a CSS file that links to the fonts Lobster, Droid Serif and Droid Sans. Actually, my stylesheet asks for a lot of fonts – most of the time you'd only need to ask to serve a few fonts, but I wanted to show off some of the fonts I really liked in the Font Directory.
When I want to style an element, such as setting a font for the body, I would then use:
body {
font-family:'Droid Serif',Garamond,Georgia,'Times New Roman',serif;
}
I call Droid Serif as I would any local font (using quotes since there are spaces in the name). I also have a fallback font stack, to make sure that browsers that don't support web fonts will also get a decent display font.
That's really all there is to it. There are a few other ways to implement the Google Font API (including a Javascript preloader for fine-tuned control over how the fonts load) but it's really simple. I really like how you don't have to think too hard about web fonts. Just choose what you want, add an @import or <link> line, and use the fonts like you've always used fonts. Except now you have one hard decision: Which font should you use?
I created Web Fonts are the Future! as a quick demonstration of the power of web fonts in general, and the Google Font API in particular. WFatF uses two primary fonts, a header font, Lobster (my new favorite campy script) and a body font, Droid Serif (clean, useful, and highly legible.) It also demos a few other fonts available in the Google Font Directory. For extra fun, I also decided to use some up-and-coming features of CSS3 including indepent alpha transparency, rounded borders, shadows and rotation. The result is something more poster and print like than web-like. At least, it is for now. As more font services become available and more browsers support the latest features, things like this will become more common as designers adopt them and users expect them.
Different browsers render this page very differently. For example, the latest versions of Firefox, Chrome and Safari all render the elements the way I expect (fonts work, transparency and borders and rotations work.) Opera renders everything except the rotations (although I suspect that will be coming soon.) Camino renders the borders and transparency but not the fonts or rotations. IE renders the fonts, but nothing else. This fragmentation is unfortunate but just the way things are right now. As browsers come into parity with the latest CSS3 specs, things should look better and better.
I'm Melissa, and I'm a webmaster at Google. I've been involved with a number of theming projects as part of my 20% time for several years now (starting with the original templates gallery in Google Docs), and Web Fonts is just the latest iteration. I got my hands on the early version of the Google Font Directory and went hog wild. This is just a way to show off what we can do.