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" type="text/css" href="">

Then, specify the font in CSS:

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

Here's a example HTML:

<title>sample page</title>
<link rel="stylesheet" type="text/css" href="">
body {font-family: "Geo", serif}

<p>Once upon a time there's a movie called Tron.</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
Liket it? 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 Reference
  5. DOM
  6. SVG
  7. Web Dev Blog