Ci sono dei scenari in cui il web designer, a richiesta specifica dell'utente, deve utilizzare dei caratteri specifici (webfont) nella creazione di un sito web, caratteri che in modo predefinito non sono visualizzabili.Per superare questa limitazione uno dei metodi più comuni è di utilizzare la proprietà "font-face" del CSS3 o utilizzare Google Web Fonts. In questa mini-guida vediamo come implementare questa funzionalità utilizzando la direttiva @font-face. Ho utilizzato come esempio la versione più recente di joomla 2.5.14 con il template predefinito beez 2.
1. Preparare il font in locale.
a). Scaricare il font desiderato nel formato .otf o .ttf (attenzione alla licenza d'uso).
Prendiamo un esempio con il font "Bebas Neue", un ottimo font da utilizzare specialmente nei titoli H1. Scarichiamo il ZIP e troviamo all'interno un file nel formato OTF (bebasneue.otf). (Esempio: http://www.dafont.com/)
b). Convertire i file .otf o .ttf in webfonts con l'utilizzo dei vari converter online
- http://www.font2web.com/
- http://www.fontsquirrel.com/tools/webfont-generator
- http://convertfonts.com/
c). Creare una cartella 'fonts' nella root del template predefinito (se non c'è).
d). Copiare i 4 font convertiti (.eot, .woff, .ttf, .svg) nella cartella 'fonts' (bebasneue.eot, bebasneue.svg, bebasneue.ttf e bebasneue.woff);
e). Incorporare e utilizzare questi font, ma fate attenzione di cambiare il nome del font con quello che utilizzate.
2. Utilizzare il font dalla cartella "fonts"
Inserire nel file CSS del template, la seguente proprietà:
@font-face {
font-family: 'BebasNeueRegular';
src: url('../fonts/bebasneue.eot');
src: url('../fonts/bebasneue.eot') format('embedded-opentype'),
url('../fonts/bebasneue.woff') format('woff'),
url('../fonts/bebasneue.ttf') format('truetype'),
url('../fonts/bebasneue.svg#BebasNeueRegular') format('svg');}
Adesso se vogliamo utilizzare quel font nei tag (tutti) H2, nel nostro file CSS inseriamo un'istruzione del genere:
h2{
font: 24px/27px 'BebasNeueRegular', Arial, sans-serif!important;}
Se vogliamo utilizzarlo invece solo in alcuni tag H2 allora dobbiamo creare una classe specifica del tipo:
h2.classeottanta{
font: 24px/27px 'BebasNeueRegular', Arial, sans-serif!important;}
NOTA: Fate attenzione nell'utilizzo dei font. Questi rallentano il caricamento delle pagini web. Di conseguenza vi consiglio di utilizzare solo il minimo necessario di questi font non-tradizionali !
Buon CSS a tutti !
Commenta questo articolo sul forum 