CSS: using @font-face

A couple of minutes ago I inserted the DejaVu Serif font on a Wordpress web site I'm working on. The main style sheet which makes use of the @font-face rule was downloaded from Font Squirrel together with the source fonts. There are four web fonts formats available: TTF, EOT, SVG and WOFF. At a first glance, the @font-face rule has been used several times to include all font variants. Each rule block takes care of inserting the specified variant using the four available formats. Let's take a look at these rules.

Here are the rules:

@font-face {
    font-family: 'DejaVuSerifBook';
    src: url('DejaVuSerif-webfont.eot');
    src: url('DejaVuSerif-webfont.eot?#iefix') format('embedded-opentype'),
         url('DejaVuSerif-webfont.woff') format('woff'),
         url('DejaVuSerif-webfont.ttf') format('truetype'),
         url('DejaVuSerif-webfont.svg#DejaVuSerifBook') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'DejaVuSerifItalic';
    src: url('DejaVuSerif-Italic-webfont.eot');
    src: url('DejaVuSerif-Italic-webfont.eot?#iefix') format('embedded-opentype'),
         url('DejaVuSerif-Italic-webfont.woff') format('woff'),
         url('DejaVuSerif-Italic-webfont.ttf') format('truetype'),
         url('DejaVuSerif-Italic-webfont.svg#DejaVuSerifItalic') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'DejaVuSerifBold';
    src: url('DejaVuSerif-Bold-webfont.eot');
    src: url('DejaVuSerif-Bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('DejaVuSerif-Bold-webfont.woff') format('woff'),
         url('DejaVuSerif-Bold-webfont.ttf') format('truetype'),
         url('DejaVuSerif-Bold-webfont.svg#DejaVuSerifBold') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'DejaVuSerifBoldItalic';
    src: url('DejaVuSerif-BoldItalic-webfont.eot');
    src: url('DejaVuSerif-BoldItalic-webfont.eot?#iefix') format('embedded-opentype'),
         url('DejaVuSerif-BoldItalic-webfont.woff') format('woff'),
         url('DejaVuSerif-BoldItalic-webfont.ttf') format('truetype'),
         url('DejaVuSerif-BoldItalic-webfont.svg#DejaVuSerifBoldItalic') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'DejaVuSerifCondensed';
    src: url('DejaVuSerifCondensed-webfont.eot');
    src: url('DejaVuSerifCondensed-webfont.eot?#iefix') format('embedded-opentype'),
         url('DejaVuSerifCondensed-webfont.woff') format('woff'),
         url('DejaVuSerifCondensed-webfont.ttf') format('truetype'),
         url('DejaVuSerifCondensed-webfont.svg#DejaVuSerifCondensed') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'DejaVuSerifCondensed';
    src: url('DejaVuSerifCondensed-Italic-webfont.eot');
    src: url('DejaVuSerifCondensed-Italic-webfont.eot?#iefix') format('embedded-opentype'),
         url('DejaVuSerifCondensed-Italic-webfont.woff') format('woff'),
         url('DejaVuSerifCondensed-Italic-webfont.ttf') format('truetype'),
         url('DejaVuSerifCondensed-Italic-webfont.svg#DejaVuSerifCondensed') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'DejaVuSerifCondensedBold';
    src: url('DejaVuSerifCondensed-Bold-webfont.eot');
    src: url('DejaVuSerifCondensed-Bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('DejaVuSerifCondensed-Bold-webfont.woff') format('woff'),
         url('DejaVuSerifCondensed-Bold-webfont.ttf') format('truetype'),
         url('DejaVuSerifCondensed-Bold-webfont.svg#DejaVuSerifCondensedBold') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'DejaVuSerifCnBdIt';
    src: url('DejaVuSerifCondensed-BoldItalic-webfont.eot');
    src: url('DejaVuSerifCondensed-BoldItalic-webfont.eot?#iefix') format('embedded-opentype'),
         url('DejaVuSerifCondensed-BoldItalic-webfont.woff') format('woff'),
         url('DejaVuSerifCondensed-BoldItalic-webfont.ttf') format('truetype'),
         url('DejaVuSerifCondensed-BoldItalic-webfont.svg#DejaVuSerifCnBdIt') format('svg');
    font-weight: normal;
    font-style: normal;

}

Each rule is made of the following statements:

1. font-family: specifies the font family in use
2. src: specifies the source font
   • url: path to the source font
   • format: format of the font (embedded-opentype (EOT), woff (WOFF), truetype (TTF), svg (SVG))

Browsers parse each rule, download the requested font and compute the styles accordingly. Depending on the server's speed, you could notice that fonts are first left unstyled. For that reason, I recommend to use a similar font as the first alternative, chosen among the most common ones:

body {
	font: 100% 'DejaVuSerif', Georgia, serif;
}