Google Webfont Tutorial

By Xah Lee. Date: . Last updated: .

Google has a webfonts project, at

https://fonts.google.com/

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="http://fonts.googleapis.com/css?family=Geo">

Then, specify the font in CSS:

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

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

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');
}

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.

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