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

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.

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.

Font Topic

  1. Meaning of Font Size and Em Height
  2. CSS: What font-size is xx-large, x-large, small?
  3. CSS: Font Weight, Bold
  4. Standard Web Fonts
  5. Google Webfont Tutorial
  6. CSS: Text Decoration: Underline, Overline, Line-Through
  7. CSS: Text Shadow
Liket it? Put $5 at patreon.

Or, Buy JavaScript in Depth

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