http://blog.DoZarte.com

Nonostante altre soluzioni per usare qualsiasi font su una pagina web anche se questo non è installato nel sistema operativo dell’utente/navigatore, si stanno “pian piano” affermando delle soluzioni che possiamo trovare incorporate direttamente all’interno dei browser.

Il supporto per la regola @font-face permette di usare una particolare sintassi all’interno dello stile CSS di una pagina html, richiamando un file TTF (True Type font) opure OTF (Open Type Font) tramite una semplice riga di codice.
Il supporto per questa regola è disponibile però non in tutti i browser attualmente usati: Firefox 3.5, Safari 3.1 e Opera 10 (ed ovviamente le versioni successive) supportano la regola @font-face.

In Google Chrome il supporto della regola @font-face ci sarebbe, ma è stato disabilitato per questioni di sicurezza; sembra però che nelle versioni future il supporto alla regola verrà riattivato nella configurazione di default.

Per Microsoft Internet Explorer il discorso è – come sempre! – diverso: il supporto per la regola @font-face c’è addirittura dalla versione 4 di Explorer (!), ma il supporto per i font TTF e OTF è sostituito dal supporto per i font EOT (Embedded OpenType), che è un tipo di font studiato e sviluppato da Microsoft per l’uso sul web.

L’uso della regola @font-face, come detto, è molto semplice…

All’interno di un foglio di stile, ogni uso della regola definisce il nome di una famiglia di caratteri da usare, il file del font da caricare e le caratteristiche dello stile (come grassetto, corsivo, ecc.):

@font-face {
font-family: Carattere personale;
src: url(SEVESBRG.TTF);
}
body {
font-family: Carattere personale, verdana, arial;
}

Tramite l’uso di “font-weight” e “font-style” si possono definire gli stili diversi di un medesimo font, andando ben oltre la combinazione di grassetto/corsivo, in quanto i valori di Font-Weight possono essere arrivare fino a 9.

Siccome lo scaricamento di un font richiede banda e tempo – perché il file in sé ha un certo peso in termini di kb – si può scegliere di usare una sintassi che faccia in modo di usare per primi i font installati localmente e, se assenti, di scaricarli dal server, :

src:
local("Helvetica Neue Bold"),
url(HelveticaNeueBold.ttf);

Il nome esatto da usare per richiamare un carattere è solitamente formato dal nome della famiglia più il nome dello stile.
In Mac OsX è possibile risalire a questi semplicemente accedendo FontBook e cliccando su Show Font Info.
su Windows questo è possibile scaricando il programma gratuito Font properties extension; con il programma installato, il pannello informazioni aperto su un file TTF o OTF permette di accedere alle informazioni del singolo carattere; il nome da usare è indicato alla voce Font Name.

Risorse e Link

Se comunque non volete stare lì a studiarvi tutti i vari metodi per convertire ed usare un font TTF in un sito web, c’è un sito che offre un servizio online gratuito molto bello: vi permette di caricare uno (o più) file TTF, dopodiché potrete scaricare la versione convertita di questo font – ovvero font in formato EOT, WOFF, CFF e SVG – ed un file HTML comprensivo di stile CSS che vi mostra come implementare il font in una pagina web in una maniera “a prova di proiettile”!
link: Font Face Generator

Per ulteriori e maggiori informazioni: mozilla , w3c
Per aggiornamenti sulla compatibilità offerta dai browser: webfonts