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's 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:

CSS Font

  1. font-family
  2. Standard Web Fonts
  3. Google Webfont
  4. font-size
  5. Meaning of Font Size
  6. Font Weight
  7. Chinese serif and sans-selif Font Names
Like it? Help me by telling your friends. Or, Put $5 at patreon.

Or, Buy JavaScript in Depth

If you have a question, put $5 at patreon and message me.

Web Dev Tutorials

  1. HTML
  2. Visual CSS
  3. JS in Depth
  4. JS Object Ref
  5. DOM Scripting
  6. SVG
  7. Blog