Google Webfont Tutorial

,
Want to master JavaScript in a week? Buy Xah JavaScript Tutorial.

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.

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.

How Does It Work?

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.

blog comments powered by Disqus