Una delle novità più interessanti introdotte con i CSS3 è costituita dalla proprietà @font-face, tramite la quale è possibile caricare nel browser dell’utente che visualizza il nostro sito un font non di sistema, vale a dire non pre-esistente nel suo PC o Mac.
Prima di analizzare come procedere, è opportuno dare qualche indicazione di base:
1) evitiamo di trasformare le pagine web in … guazzabugli di caratteri di ogni tipo e specie.
Ciò per salvaguardare la leggibilità dei contenuti, nonché il buon gusto!
2) ogni font aggiuntivo comporta il caricamento di un file, quindi richiede qualche istante (soprattutto in Internet Explorer).
Occorre stare attenti a non usare font troppo pesanti e a non caricarne troppi nella stessa pagina.
3) è indispensabile testare la resa del carattere nei diversi browser, anche rispetto alle dimensioni.
Questo passo è fondamentale anche se si usa un foglio di stile di reset che uniforma la risposta dei browser alle dimensioni, appunto, del font.
4) bisogna prevedere sempre un’alternativa di tipo standard, per i browser meno recenti che non supportano la proprietà font-face ed in generale, se qualcosa va storto.
Occorre inoltre controllare che le dimensioni del font alternativo siano compatibili con quelle del font principale.
Posti questi principi di base, vediamo dunque due modi per procedere:
Strumenti disponibili sul sito Font Squirrel
Il sito Font Squirrel (www.fontsquirrel.com) mette a disposizione dei kit già pronti di font alla pagina: www.fontsquirrel.com/fontface e, soprattutto, uno strumento di creazione di kit su misura per l’utente chiamato @font-face Kit Generator alla pagina: www.fontsquirrel.com/fontface/generator
Tramite questo strumento, è possibile caricare un proprio file di font (purché di libero utilizzo – attenzione alle licenze!) e scaricare il kit completo di: files del font nei vari formati (TrueType, EOT, SVG e WOFF), foglio di stile CSS e file di esempio.
Il codice CSS, da trascrivere nel foglio di stile del sito (all’inizio dello stesso!), si presenterà come segue:
/* Generated by Font Squirrel (http://www.fontsquirrel.com) on December 27, 2012 */
@font-face {
font-family: ‘batik_regularregular’;
src: url(‘batik-webfont.eot’);
src: url(‘batik-webfont.eot?#iefix’) format(‘embedded-opentype’),
url(‘batik-webfont.woff’) format(‘woff’),
url(‘batik-webfont.ttf’) format(‘truetype’),
url(‘batik-webfont.svg#batik_regularregular’) format(‘svg’);
font-weight: normal;
font-style: normal;
}
I percorsi prevedono ovviamente che i vari files siano pubblicati nella root del sito, mentre è preferibile inserirli in una cartella chiamata ad es. font; bisognerà dunque modificare i percorsi stessi in funzione della cartella scelta, del tipo:
…
src: url(‘font/batik-webfont.eot’);
…
e così via.
Nelle regole che utilizzano questo font avremo dunque:
h1 {
font-family: ‘batik_regularregular’, Arial, Helvetica, sans-serif;
}
Uso di Google Web Fonts
Google mette a disposizione un buon numero di font (oltre 600 nel momento in cui scrivo), divisi in famiglie, che possono essere liberamente impiegati nei siti web.
Una volta individuato il font da usare, è sufficiente premere sul pulsante “Quick-use” nella relativa scheda, copiare ed incollare nelle proprie pagine i codici relativi a:
– il collegamento al foglio di stile, da incollare nella sezione head della pagina, che si presenta come segue:
<link href=’http://fonts.googleapis.com/css?family=Fjalla+One’ rel=’stylesheet’ type=’text/css’>
Attenzione: incollare questa riga PRIMA del collegamento al proprio foglio di stile!
– la porzione di codice CSS di utilizzo del font, da incollare nel foglio di stile all’interno di una o più regole che devono farne uso.
Se, dunque, il codice fornito da Google si presenta del tipo:
font-family: ‘Fjalla One’, sans-serif;
occorrerà incollarlo nelle regole rilevanti, aggiungendo possibilmente ulteriori alternative per i browser che non supportano la proprietà @font-face, ad esempio:
h1,h2,h3,h4,h5,h6 {
font-family: ‘Fjalla One’, Verdana, sans-serif;
}
Google Web Fonts garantisce che i font siano ottimizzati per il web ma le prove, nei diversi browser, sono comunque indispensabili.