La scelta di un font per il nostro tema è importante ed è anche un aspetto sottovalutato dai più. Lo sviluppo di un layout o di un tema per WordPress non può prescindere da questo importante aspetto che personalizza ancor più il nostro lavoro. Persino i temi standard preinstallati usano un web font che si distacca dal logorato utilizzo dei font di sistema (verdana, arial, georgia ecc.), che – ricordo – sono font proprietari e dunque sono utilizzabili direttament come web font nei propri blog e siti web, solo se si dispone dell’apposita e costosa licenza di utilizzo.
Ma facciamo un passo indietro. Normalmente nello sviluppo di un tema, nel foglio di stile si richiama il font di sistema. Il che comporta solitamente l’uso dei font tipici preinstallati nel sistema operativo tramite il quale è utilizzato il browser. Nel caso di Windows, i citati Verdana, Aria, Georgia, Times New Roman ecc. Il problema con l’uso di questi font è che se il navigatore utilizza una distro Linux, come Ubuntu, oppure un Apple Mac OS, non è detto che i font suddetti siano presenti. Perciò la visualizzazione del nostro sito web risulterà alterata, quanto meno nei caratteri grafici.
Una prima soluzione è dare al browser una varietà di scelta che riproduca più o meno fedelmente il font standard. Prendiamo a esempio il Verdana, presente su tutti i sistemi operativi Windows. Nello sviluppo dei layout, il CSS non corretto è questo:
body {
font-family: verdana;
}
Questo perché se il browser non dispone del font verdana, utilizzerà quello predefinito nel sistema. Fin qui poco male: solitamente i caratteri predefiniti nel sistema per visualizzare le pagine web sono caratteri sans-serif, e dunque è probabile che la visualizzazione non sia così scorretta. Ma se per ipotesi, noi scegliessimo un carattere serif come il Georgia per il nostro sito? In tal caso, il blog graficamente visualizzato con un carattere serif, su un sistema che non dispone del Georgia, con una dichiarazione CSS come quella sopra verrebbe visualizzato con il carattere sans-serif preimpostato. Per aggirare l’inconveniente è più corretto determinare anche la famiglia:
body {
font-family: georgia, serif;
}
Il browser utilizzerà il carattere serif predefinito nel sistema se non trova il Georgia.
Il problema ora è un altro. Non tutti i caratteri serif, sans-serif, monospace e cursive sono identici. Per dare un’idea: il Georgia non è uguale al Times New Roman, e il Verdana non è uguale all’Arial. Così come questi font non sono uguali ad altri presenti nei sistemi operativi. Se noi scegliessimo come font per il nostro sito il Verdana e questo non è presente nel sistema operativo del nostro lettore, il carattere sans-serif utilizzato potrebbe essere molto diverso dal Verdana. Dunque, come fare? I sistemi operativi basati su Linux e OS Apple normalmente installano font molto simili a quelli preinstallati su Windows. Ecco qui una tabella comparativa non esaustiva:
| Famiglia | Windows | Apple | Linux |
| Serif | Georgia | Georgia | Nimbus Roman No9L, Century Schoolbook L, Norasi, Reka |
| Sans-Serif | Verdana | Verdana, Geneva | DejaVu Sans, Kalimati |
| Sans-Serif | Arial | Arial, Helvetica | Free Sans, Malaya, Nimbus Sans L, Garuda |
| Serif | Times New Roman | Times New Roman, Times | FreeSerif |
| Sans-Serif | Tahoma | Geneva | Kalimati |
| Monospace | Courier New | Courier New | FreeMono, Nimbus Mono L, DejaVu Sans Mono, Liberation Mono |
| sans-serif | Lucida Sans Unicode | Lucida Grande | Gargi_1.7, Garuda, Jamrul, Loma, Malayalam, Mukti Narrow |
| Cursive | Comic Sans MS | Comic Sans MS | TSCu_Comic |
A questo punto per una massima compatibilità, se dovessimo scegliere il Verdana, possiamo prevedere un simile richiamo nel nostro foglio di stile:
body {
font-family: verdana, geneva, "DejaVu Sans", Kalimati, sans-serif;
}
Un ulteriore problema riguarda le dimensioni dei caratteri, che variano a seconda del font. In parole povere, i 12px del Verdana non sono i 12px del Geneva (più piccolo del 0,1%). Ecco perché è importante scegliere un web font che sia cross browser e cross O.S. Ci viene in aiuto Google, con i suoi web font: completamente gratuiti e utilizzabili dai repository di Google senza doverli caricare sulla directory del nostro sito web.
Per richiamare un web font di Google (nell’esempio Open Sans), i sistemi sono diversi. Possiamo richiamarlo direttamente nel foglio CSS in questo modo:
@import url(http://fonts.googleapis.com/css?family=Open+Sans);
Oppure utilizzando javascript:
<script type="text/javascript">
WebFontConfig = {
google: { families: [ 'Open+Sans::latin' ] }
};
(function() {
var wf = document.createElement('script');
wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
'://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
wf.type = 'text/javascript';
wf.async = 'true';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(wf, s);
})(); </script>
O ancora utilizzando il tag link nell’header:
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
Per WordPress, è altamente consigliabile utilizzare quest’ultimo sistema, decisamente più pulito e conforme alle raccomandazioni della documentazione di WordPress.org:
function my_webfonts{
wp_enqueue_style('http://fonts.googleapis.com/css?family=Open+Sans');
}
add_action( 'wp_enqueue_scripts', 'my_webfonts' );
Una volta richiamato nel nostro tema, possiamo tranquillamente richiamare il web font nel nostro foglio di stile come un qualsiasi altro font:
body {
font-family: "Open Sans", sans-serif;
}
Indubbiamente, ora il nostro blog o sito web sarà uniforme con qualsiasi browser o sistema operativo si utilizzi, con qualche lieve e minima differenza, del tutto ininfluente nell’armonia generale.