Code examples from Visual Stylin' with CSS3 by Charles Wyke-Smith

Section 7 • Web Fonts

This type is set in the Prata font.

<link href=
'http://fonts.googleapis.com/css?family=Prata' rel='stylesheet' type='text/css'>
Figure 63: This headline is set in Prata. This font is downloaded from Google and added using a link tag in the head of the page.

This type is set in the Ubuntu font.

@font-face {
 font-family: 'UbuntuTitlingBold';
 src: url('fonts/Ubuntu-Titling/UbuntuTitling-Bold-webfont.eot');
 src: url('fonts/Ubuntu-Titling/UbuntuTitling-Bold-webfont.eot?#iefix')
 format('embedded-opentype'),
   url('fonts/Ubuntu-Titling/UbuntuTitling-Bold-webfont.woff') format('woff'),
   url('fonts/Ubuntu-Titling/UbuntuTitling-Bold-webfont.ttf') format('truetype'),
   url('fonts/Ubuntu-Titling/UbuntuTitling-Bold-webfont.svg#UbuntuTitlingBold') 
   format('svg');
    font-weight: normal;
    font-style: normal;
}
Figure 64: This headline is set in Ubuntu. This FontSquirrel font (downloaded from FontSquirrel.com) is added to the page using the @fontface rule and would be served from your Web server (in this example, it's served from a local folder)