Buon pomeriggio.
(immagine da http://blogger-facile.blogspot.it/2008/10/i-130-font-pi-belli-di-sempre.html)
Se siete stufi dei soliti 4/5 font "standard" nei vostri blog allora questo è il tutorial che fa per voi.
Infatti oggi vedremo come inserire font particolari all'interno del nostro sito o blog e visualizzarli correttamente su tutti i browser anche se l'utente non possiede quel font all'interno del suo PC.
Come al solito ci sono diverse tecniche e noi vedremo la più semplice in assoluto. Iniziamo con una piccola premessa. Purtroppo i browser non accettano tutti lo stesso formato di font e, come al solito, IE è quello che si differenzia da tutti gli altri! Quindi per far si che il nostro font si veda correttamente in tutti i browser dobbiamo avere il font da inserire nei seguenti formati:
- .eot (embedded open type) per IE precedenti al 9;
- .ttf (true type) per Mozzilla, Chrome, Opera e Safari;
- .woff per Mozzilla e IE9.
Possiamo quindi dedurre che abbiamo bisogno di almeno 2 file di font: uno .ttf e uno .eot. Ma cosa facciamo se il font che abbiamo scelto non dispone del formato .eot? Semplice, lo convertiamo con un piccolo programmino o con qualche servizio di conversione on-line.
Ecco un paio di soluzioni per convertire un font da .ttf a .eot:
- http://code.google.com/p/ttf2eot/
- http://onlinefontconverter.com/
Ora che disponiamo di tutti i file necessari dovremo creare una nuova cartellina font nel nostro spazio web (es. www.miosito.it/font) ed inserirci i file dei font che ci interessano. A questo punto si dovrà opportunamente modificare il foglio di stile con delle semplici regole.
@font-face è la regola da utilizzare nel foglio di stile per definire il nostro nuovo font. Ecco un esempio:
@font-face {
font-family: 'font_name';
src: url(www.miosito.it/font/font_name.eot);
src: local('font_name'), url('www.miosito.it/font/font_name.ttf') format('truetype');
}
Cosa significa tutto questo?
- font-family indica il nome del font che vogliamo inserire. Quindi qui dovremo inserire tra virgolette il nome preciso del nostro font;
- src indica il percorso in cui si trova il font che vogliamo inserire. Come potete notare ci sono due src, uno per il file eot ed uno per il file ttf.
Fatto questo basterà indicare a chi assegnare questo font. Ad esempio se vogliamo assegnarlo a tutti i testi del nostro sito o blog possiamo scrivere all'interno del foglio di stile:
body {
...
font-family: font_name;
...
}
Questo è tutto. Ora potrete finalmente inserire qualcosa di diverso dai soliti Arial, Verdana, Trebouchet MS, ecc.