CSS @font-face and Google Web Fonts API

CSS @font-face is now supported by most of the major browsers, and is definitely one of the exciting new features of the CSS3. As the name suggest, it helps you use the custom fonts on your website (not necessarily installed on the user machine viewing your website). These fonts are then dynamically loaded to the user browser cache and used to render the fonts.

Here is how you can use style to include custom fonts:

1
2
3
4
5
6

@font-face
{
    font-family: sansationLightFont;
    src: url('Sansation_Light.ttf'),
         url('Sansation_Light.eot'); /* IE9 */
}

You can then use this new font family similar to the way you use other font families in the CSS e.g.

1
2
3

<div style="font-family: sansationLightFont">
This text will appear in Sansational Light font.
</div>

Even better approach is that if you are using some popular font, then first check the Google Web Fonts Directory. There are good chances, that the font you would like to use is already in this directory. If it’s, you can include this on your page by using the following simple CSS link (should go in your page header):

1

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

You can also specify multiple fonts, and can control different other options like styles, subsets and custom optimization of loading text. For details check Google Web Fonts Getting Started.

Here is the sample of Google Web Fonts in action:

Lets make the web pages even more beautiful, and get faster (by getting rid of images for custom font drawing).

Tags: CSS, Font, Font-Face, Google, Web Font

This entry was posted on Tuesday, August 7th, 2012 at 4:26 am and is filed under HTML & CSS. You can follow any responses to this entry through the RSS 2.0 feed.
You can leave a response, or trackback from your own site.