Tra le novità che offre il CSS3, oggi vediamo come utilizzare @Font-face, una regola con la quale sarà possibile utilizzare all’interno del nostro sito internet un qualsiasi font non standard. Questo è un grosso vantaggio per i web designer perchè non dovranno più adeguardi ai “font standard” quindi potranno esprimere tutta la loro creatività all’interno del sito internet.

E’ possibile operare in due maniere differenti:

1) Incorporare il font nel sito e successivamene associarlo al proprio selettore.

@font-face{
 font-family: ‘TradeGothicLTStdLight’;
 src: url(’/font/TradeGothicLTStdLight.ttf’);
}
h2 {
font-family: ‘Airstrip_Four’;
}

2) Convertire il font attraverso un generatore @Font Face. Questa tecnica leggermente più lunga, permette però un maggior controllo da parte del web designer. Il sistema è comunque semplice perchè basta scegliere un font, convertirlo e successivamente incorporare nel sito la cartella dei font convertiti richiamandoli nell’header del sito.

<link rel="stylesheet" href="/font/stylesheet.css" type="text/css" charset="utf-8" />

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

Io amo sempre essere ordinato all’interno della cartella del mio sito ed è per questo che ho inserito il tutto nella cartella font.

Ovviamente (ma poco ci importa) il @Font Face non funziona con il browser Internet Explorer perchè obsoleto.