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

Then, specify the font in CSS:

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

Here's a example HTML:

<html>
<head>

<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Geo">

<style>
body {font-family: "Geo", serif}
</style>

<title>sample page</title>
</head>
<body>

<p>Once upon a time.</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 https://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 .

JS in Depth
XAH  BUY NOW