2010-12-16

Google Webfont

Perm url with updates: http://xahlee.org/js/Google_webfont.html

Google Webfont Tutorial

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.

How to use Google Webfont

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.

No special syntax or knowledge is required. All you need to do is to include a style sheet at google 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 their font directory and choose a font you want. Then, put the right font name in the above code.

How Does It Work?

If you look at the css source code at http://fonts.googleapis.com/css?family=Geo, it's 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」 appears to started in CSS2, but is not widely support. You can read some history at: Web fonts 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.