Lo Skyblog

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à):

@font-face {
   font-family: MioFontCustom;
}

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:

@font-face {
   font-family: MioFontCustom;
   src: url("../percorso/MioFontCustom.ttf");
}

Il font si può trovare anche su un server differente. In questo caso, dovremo indicarne la URI:

@font-face {
   font-family: MioFontCustom;
   src: url("http://www.altrosito.com/fonts/MioFontCustom.ttf");
}

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:

@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 */
}

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):

h3 {
	text-indent: 15px;
	margin-left: -15px;
	font-family: MioFontCustom, verdana, helvetica, sans-serif;
}