CSS: usare @font-face e i web font

Giusto venti minuti fa ho finito di inserire un web font su un sito in Wordpress di cui ho creato il template. Il foglio di stile importato nel principale è stato scaricato da Font Squirrel insieme con tutte le varianti e i formati del font richiesto. Questo foglio di stile fa uso della direttiva @font-face per inserire il font nei quattro formati più diffusi, ossia TTF, EOT, SVG e WOFF. Ci sono diversi blocchi che fanno uso di questa regola per inserire tutte le varianti del font. Esaminiamo da vicino queste regole.

Ecco il foglio di stile chiamato stylesheet.css, che si trova nella stessa directory dei file del font:

@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;

}

Ogni regola è composta dalle seguenti parti:

1. font-family: specifica la famiglia o la variante del font in uso
2. src: specifica il sorgente del font
   • url: specifica il percorso al file del font
   • format: specifica il formato del font (embedded-opentype (EOT), woff (WOFF), truetype (TTF), svg (SVG))

I browser leggono le regole, scaricano i font e applicano gli stili agli elementi specificati. Tra lo scaricamento e la visualizzazione degli elementi nel font specificato può passare un breve istante in cui gli elementi appaiono senza gli stili richiesti (il cosiddetto flash of unstyled fonts). Per questo motivo si raccomanda di specificare sempre un alternativa al web font richiesto. Tale alternativa dovrebbe essere un font dalle caratteristiche simili. Esempio:

@import url('includes/dejavu-font/stylesheet.css');
body {
	font: 100% 'DejaVuSerif', Georgia, serif;
}