Ogni qual volta ci si trova a lavorare su un progetto web, prima o poi ci si deve scontrare con la scelta della famiglia di caratteri con cui si intende visualizzare i propri contenuti. Nella maggior parte dei casi è sufficiente impostare nel proprio foglio di stile una serie di font standard, presenti praticamente in ogni architettura (es: i “classici” Default Sans Serif, Helvetica, Tahoma, Georgia eccetera) ed il gioco è fatto.

Ma come fare se la richiesta, necessità o semplice sfizio, ci portano a dover adottare un carattere particolare? Ad esempio uno molto elaborato per il sito di un wedding planner, o uno in stile militare, od altro ancora? La risposta al problema si chiama CSS3, e più precisamente “direttiva @font-face“.

L’utilizzo di @font-face è semplice ed immediato. Apriamo il nostro foglio di stile (solitamente chiamato style.css) ed aggiungiamo (preferibilmente in cima, in modo da renderne semplice la rintracciabilità):
[cc_css]
@font-face {
font-family: MioFontCustom;
}
[/cc_css]

Ora che avremo definito il nome del nostro font, che useremo all’interno del CSS, dovremo impostare il suo percorso, per cui la direttiva @font-face risulterà simile alla seguente:
[cc_css]
@font-face {
font-family: MioFontCustom;
src: url(“../percorso/MioFontCustom.ttf”);
}
[/cc_css]

Il font si può trovare anche su un server differente. In questo caso, dovremo indicarne la URI:
[cc_css]
@font-face {
font-family: MioFontCustom;
src: url(“http://www.altrosito.com/fonts/MioFontCustom.ttf”);
}
[/cc_css]

Questa procedura è perfettamente funzionante con tutti i browser, escluso, tanto per cambiare, Internet Explorer. Il browser Microsoft, infatti, richiede un font in formato EOT (Embedded Open Type) invece di uno TrueType. Sarà quindi necessario scrivere una doppia direttiva @font-face, che faccia riferimento ad entrambi i formati. In questo modo:
[cc_css]
@font-face {
font-family: MioFontCustom;
src: url(“MioFontCustom.eot”) /* EOT file for IE */
}

@font-face {
font-family: MioFontCustom;
src: url(“MioFontCustom.ttf”) /* TTF file for CSS3 browsers */
}
[/cc_css]

Non ci resta altro che convertire, se necessario, il nostro font TrueType in EOT. Come fare? Esistono comodi servizi online gratuiti, come ad esempio ttf2eot grazie a cui, in due semplici click, potremo ottenere una copia in EOT del font richiesto.

L’utilizzo del font è semplicissimo: basterà aggiungerlo ad ogni istruzione font-family desiderata, in questo modo (esempio):
[cc_css highlight=”4″]
h3 {
text-indent: 15px;
margin-left: -15px;
font-family: MioFontCustom, verdana, helvetica, sans-serif;
}
[/cc_css]