Google Fonts: ottimizzare il caricamento e velocizzare il sito

Come ho scritto nell’articolo sui Web fonts, Google Fonts è il miglior modo per utilizzare sul proprio sito dei fonts non standard. Google Fonts ha portato il web design ad un nuovo livello, garantendo alla tipografia del vostro sito, il classico effetto WOW!

Questo articolo fa parte del filone degli articoli che ho dedicato a come velocizzare un sito in WordPress, anche se ovviamente le sue indicazioni possono andare bene anche per qualsiasi tipo di sito.

Come web designer a Udine non ho mai dovuto ottimizzare questo aspetto ma se, i programmi che vanno ad analizzare le speed performance del vostro sito, vi segnalano che Google Fonts rallenta i tempi di caricamento, allora questa mia guida potrebbe proprio tornarvi utile.

Primo modo: caricare i file sul vostro server

Partiamo da una considerazione: per utilizzare Google Fonts sul vostro sito dovete richiamare un CSS esterno (che sta su un altro server) e che a sua volta richiama altri file (quelli dei font). Andate quindi all’indirizzo del CSS caricato da Google Fonts.

https://fonts.googleapis.com/css?family=Lora

/* cyrillic-ext */
@font-face {
  font-family: 'Lora';
  font-style: normal;
  font-weight: 400;
  src: local('Lora Regular'), local('Lora-Regular'), url(https://fonts.gstatic.com/s/lora/v12/Ukd0sOIY4JZgcODPuj2G3Q.woff2) format('woff2');
  unicode-range: U+0460-052F, U+20B4, U+2DE0-2DFF, U+A640-A69F;
}
/* cyrillic */
@font-face {
  font-family: 'Lora';
  font-style: normal;
  font-weight: 400;
  src: local('Lora Regular'), local('Lora-Regular'), url(https://fonts.gstatic.com/s/lora/v12/GsNxiN0oIzsS201cnUag6w.woff2) format('woff2');
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

Le stringhe che vi ho evidenziato, presentano il percorso al font che avete utilizzato sul vostro sito. Visitate questi percorsi, scaricate questi file di tipo font e caricateli sul vostro spazio web (ad esempio nella cartella del theme del sito). Aggiungete quindi nel vostro css il richiamo al font che avete scaricato da Google Fonts e caricato sul vostro server.

/* cyrillic-ext */
@font-face {
  font-family: 'Lora';
  font-style: normal;
  font-weight: 400;
  src: local('Lora Regular'), local('Lora-Regular'), url(https://www.miosito.it/wp-content/themes/miotema/Ukd0sOIY4JZgcODPuj2G3Q.woff2) format('woff2');
  unicode-range: U+0460-052F, U+20B4, U+2DE0-2DFF, U+A640-A69F;
}

Secondo modo: caricare solo i caratteri di cui avete bisogno

Ipotizziamo che abbiate trovato il font perfetto su Google Font per stilizzare il solo logo del vostro sito, capite bene che non vale la pena di caricare l’intero set di caratteri se alla fin fine ci servono poche lettere. Ipotizziamo che il nostro font sia Lora e il nostro logo riporti la scritto “Laura Musig”.

Normalmente avremmo

<link href='http://fonts.googleapis.com/css?family=Lora' rel='stylesheet' type='text/css'>

Ma poiché a noi interessano solo poche lettere, per ottimizzare il caricamento di Google Fonts, scriveremo.

http://fonts.googleapis.com/css?family=Lora&text=LAURMSIG

Facile vero?