Google Web Fonts è uno degli strumenti che uso più spesso: dà la possibilità di incorporare gratuitamente una miriade di splendidi fonts all’interno dei siti web.
Per quanto semplice e intuitivo sia il suo utilizzo però, forse non tutti sanno che esistono molte opzioni avanzate, come quella per ottimizzare il caricamento del file del font.
Tutte le volte che noi utilizziamo un carattere per il nostro sito infatti, sottostiamo ai tempi di caricamento con cui questo viene servito dai server di Google. Tempi che possono variare a seconda del peso del file. Se poi di un font si aggiungono anche le eventuali varianti (italic, medium, light, ecc.), ecco che il peso aumenta maggiormente.
In quali casi conviene ottimizzare?
Se il carattere in questione ci serve esclusiavmente per un titolo, oppure per un logo, allora questo è proprio il caso di ottimizzare! Dato che infatti conosciamo l’esatto numero di lettere e simboli che ci servono, non ha senso doversi scaricare un intero set.
Per esempio, abbiamo scelto il font "Varela", che ci serve solamente per stilizzare il logo della nostra attività: la ACME SPA. Nel caso utilizzassimo il tag link, una cosa da non fare è proprio questa:
<link href='http://fonts.googleapis.com/css?family=Varela' rel='stylesheet' type='text/css'>
Sfruttando l’attributo href, correggiamo la stringa in questo modo:
http://fonts.googleapis.com/css?family=Varela&text=ACMESP
Se guardiamo da vicino la parte finale dell’ attributo, si noterà che abbiamo aggiunto un parametro (&text=ACMESP) che dice a Google di caricare solo ed esclusivamente i 6 caratteri elencati dopo il segno =. Inoltre, non c’è bisogno di indicare due volte la lettera "A".
Ma attenzione! L’intera operazione è case sensititve: significa che in questo caso ho caricato solamente le lettere maiuscole.
Il tempo di caricamento della pagina si ridurrà notevolmente: in alcuni casi addirittura del 90%!