Google introduced their web fonts from their font directory, which are open source, and ofcourse, free to use in any web sites!
In this article I looked a little bit deeper, to let you know how you can use them in your websites.
First of all, the web font directory became accesible to public on May 19th, 2010, and curently has 18 families, some sub-families and variants.
I'm the fancy Lobster font!
I'm from the Yanone Kaffeesatz font family
Import web fonts into your template
You have 3 variants to import them into you template.1. Include fonts between head tags
You can include the link to the font source in <head> using:<link href='http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz' rel='stylesheet' type='text/css'>
Where the Yanone Kaffeesatz is the type of the font, but I don't like a mess between the head tags, so I prefer the 2nd or 3rd variant.2. Include fonts at the beginning of <body> tag
Usefull variant if you want to use the selected font only in one page.<style type="text/css">
@import url(http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz);
</style>
Very usefull in your blogger or wordpress pages, when u don't want to change the whole template.@import url(http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz);
</style>
3. Import fonts into your external stylesheet
My favourite!@import url(http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz);
Simply add the @import syntax at the beginning of your external stylesheet.Define the font family to your elements
Simple as that, choose a element where you want to use web fonts.Whole page uses the same font family
You can define them in your stylesheet or in the html tags.Define font variant in the stylesheet
body { font-family: 'Yanone Kaffeesatz', arial, serif; }
This will make your website more clear and easy to edit later, so I recommend you to use stylesheets.Define font variant in the html body tag
<body style="font-family: 'Yanone Kaffeesatz', arial, serif;">
Simply edit the body tag at the beginning of the page.You can also use this way, but I think it's a little bit outdated, and the html gets messy.
Multiple web fonts in one page
If you want to use multiple fonts just add a delimiter | in the link to the source font.http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz|Droid+Serif|Cantarell
Here is a example using Yanone Kaffeesatz, Droid Serif and Cantarell font in one stylesheet.Google webfonts
And I almost forgot to tell you where can u get the fonts, they are available here!
Font preview with CSS code
Preview your text how it looks with chosen font!
Edit line height, word spacing, text decoration and stuff by clicking here!