Xah Lee, 2010-12-16
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 (2007-08-28) 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.