Embedding and using Google Web Fonts in your pages

Google Web Fonts are a useful feature that can actually enhance the visual appealing of your web pages. First of all, you need to select a font from the Font Directory. Then, just click on Embed to get the code. For example, if you want to use the Yanone Kaffeesatz font, you get a code like this:

<link href=' http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz' rel='stylesheet' type='text/css'>

The URL contained in the above link element actually retrieves the following style sheet:

@font-face {
  font-family: 'Yanone Kaffeesatz';
  font-style: normal;
  font-weight: 400;
  src: local('Yanone Kaffeesatz'), url('http://themes.googleusercontent.com/font?kit=YDAoLskQQ5MOAgvHUQCcLdZ76ZYKVLHIjRQjrp3kYFc') format('truetype');
}

Of course you can use these styles with an @import rule, like so:

@import url(http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz);

The above declaration must be put at the very beginning of your CSS file. After this, you can use the downloaded font this way:

h1 { font-family: 'Yanone Kaffeesatz', Arial, sans-serif; }