Recently, discovered that Google has a webfonts project, at code.google.com/webfonts.
For web authors, it is probably the most easy way to use a font and have your readers see the same font, regardless what browser they are using.
It's very easy to use, and does not require extra knowledge. Here's a example HTML:
<html> <head> <title>sample page</title> <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Geo"> <style> body {font-family: "Geo", serif} </style> </head> <body> <p>Once upon a time… there's a movie called Tron.</p> </body> </html>
You can see the above HTML rendered here: Google Webfont Sample Page.
All you need to do is to include a style sheet in the line:
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Geo">
Then, you can freely choose the font in your CSS:
body {font-family: "Geo", serif}
Just go to Google webfont site and choose a font you want. Then, put the right font name in the above code.
If you look at the CSS source code at http://fonts.googleapis.com/css?family=Geo, its content is this:
@font-face { font-family: 'Geo'; font-style: normal; font-weight: normal; src: local('Geo'), local('Geo-Regular'), url('http://themes.googleusercontent.com/font?kit=mJuJYk5Pww84B4uHAQ1XaA') format('truetype'); }
The @font-face rule, which allow browsers to download fonts, appears to have started in CSS2 some 10 years ago, but was not widely supported and had a lot issues, such as font copyright problem or font format.
But, apparently, it is well supported in today's browsers.
You can read some history at:
Web typography
and
CSS @ Ten: The Next Big Thing by Håkon Wium Lie at Source www.alistapart.com
Also, exactly what CSS source code Google sends out is dependent on the reader's browser. For tech detail, see: http://code.google.com/apis/webfonts/docs/technical_considerations.html.