Geckozone

Sicuramente uno dei fattori importanti del web design è la scelta del font del sito; esso deve essere chiaramente leggibile e può determinare l’intera funzionalità di esso. Ma perché non dare quel tocco di eleganza in più non utilizzando i font standard? Vediamo insieme come fare con @font-face!
Nessun codice esterno, usiamo solo il puro CSS, con qualche trucchetto. La proprietà che permette di personalizzare i nostri font è “@font-face”. Con questa proprietà possiamo gestire i font personalizzati, caricati nelle directory del nostro server, dandoci così il vantaggio di poter utilizzare font che non sono installati sui client, ossia sui computer dei visitatori.

Problemi di compatibilità

La proprietà è supportata in tutti i browser principali, ma non tutti i browser riescono a utilizzare le varie tipologie di carattere, ecco quindi le tipologie di carattere supportare dai diversi browser:

• Mozilla Firefox <3.5: TTF
• Mozilla Firefox >3.6: WOFF
• Chrome: TTF
• Opera: TTF
• Safari: TTF
• Internet Explorer: OET

Come potete notare Internet Explorer non supporta il formato classico TrueType (TTF) ma solo il formato Embedded OpenType. Quindi abbiamo la necessità di procurarci i due formati del font per rendere il sito cross-browser. Nel caso non possediate i due tipi di formato, potete trasformare facilmente il vostro font da TTF a OET con questo sito in pochi semplici passaggi.

Lavoriamo con @font-face

La formattazione dell’opzione @font-face è semplice:

1
2
3
4
5
6
7
8
9
10

@font-face {
font-family: 'font_name';
src: url(font_name.eot);
src: local('font_name'), url('font_name.ttf') format('truetype');
}
 
body{
font-family: font_name, Verdana, sans-serif;
font-size: 12px;
}

Inseriamo quindi questo codice nel nostro file CSS e sostituiamo “font-name” con il nome del nostro carattere. Ad esempio:

1
2
3
4
5

@font-face {
font-family: 'English';
src: url(English.eot);
src: local('English'), url('English.ttf') format('truetype');
}

e infine impostiamo il carattere nella parte da noi desiderata

1
2
3
4

body{
font-family: "English", Verdana, sans-serif;
font-size: 12px;
}

DEMO

Come potete vedere nella demo possiamo inserire ogni tipo di carattere da noi desiderato, quindi provate e date un tocco in più al vostro sito.

@font-face, CSS, HTML, web design