Google Webfont Tutorial

By Xah Lee. Date: . Last updated: .

Google has a webfonts project, at

For web authors, it is the most easy way to use a font and have your readers see the same font, in any browser or operating system.

How to use Google Webfont

All you need to do is to include a style sheet in the line:

<link rel="stylesheet" href="">

Then, specify the font in CSS:

body {font-family: "Geo", serif}

Here is a example HTML:


<link rel="stylesheet" type="text/css" href="">

body {font-family: "Geo", serif}

<title>sample page</title>

<p>Once upon a time.</p>


You can see the above HTML rendered here: Google Webfont Sample Page

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, its content is this:

@font-face {
  font-family: 'Geo';
  font-style: normal;
  font-weight: normal;
  src: local('Geo'), local('Geo-Regular'), url('') format('truetype');

exactly what CSS source code Google sends out is dependent on the reader's browser. For tech detail, see: .

BUY ΣJS JavaScript in Depth