Google Fonts è un servizio gratuito e altamente semplice da utilizzare. Ma usarlo con troppa leggerezza nasconde il pericolo di appesantire la navigazione. Ci sono alcune accortezze da tenere in considerazione.
Non è una novità che nello sviluppo dei progetti web si attinga alla sempre più corposa CDN di Google. Un utilizzo sempre maggiore è naturale che salti subito all’occhio, visto che si tratta delle font. Il servizio di distribuzione delle font con licenze pressoché libere (che danno libertà d’uso, modifica e distribuzione senza richiesta di permessi specifici) ha già cambiato molto l’approccio nella progettazione delle UI.
È talmente facile utilizzare
una font dalla libreria di Google che, spesso, viene influenzata la scelta tipografica anche dei nuovi progetti di identity.
È allettante infatti poter pensare l’adozione di una font gratuita, di qualità e già pronta per la trasposizione su tutti i media con il minimo sforzo. Di fatto le font ospitate da Google sono scaricabili e installabili nei propri dispositivi locali, scaricando (se preferite) tutte le famiglie in un unico file ZIP direttamente da github.
Google (appassionata di numeri) ci tiene ad aggiornarci sulle visualizzazioni delle font via CDN, con delle statistiche generali e con delle statistiche più specifiche visualizzabili consultando la scheda di dettaglio di ogni font.
Inserire le font usando la CDN di Google è semplice e ormai noto anche ai meno tecnici. Ad esempio la maggior parte dei temi per WordPress ha un supporto specifico per la selezione delle font per personalizzare l’aspetto del testo, tra le proprie varie opzioni.
Quello che magari sappiamo un po’ meno è se le font siano ottimizzate, se ci siano dei limiti tecnici
al loro utilizzo, se ci siano dei consigli per godere appieno di
questo regalo.
Senza entrare in dettagli troppo tecnici possiamo affermare che Google Fonts offre una versione delle font ottimizzata, sia nel peso in KB che nelle direttive di caching date al browser. Infatti se avete già visitato un sito web che utilizza una determinata font, il vostro browser non la dovrà scaricare nuovamente nel caso questa venga usata anche su un altro sito, accelerandone il caricamento.
CONSIGLI PER L’USO DELLE GOOGLE FONTS
Ci sono però alcune note da prendere in considerazione per non sprofondare nel goloso mare delle font gratuite.
La prima e più banale ed efficace in molti termini, è quella di limitare l’uso delle font al minimo indispensabile, evitando di caricare più di due famiglie alla volta.
La seconda è di fare ulteriore economia evitando di caricare tutti i pesi che ci vengono spesso offerti all’interno delle famiglie:
- Thin (100)
- Thin Italic (100i)
- Light (300)
- Light Italic (300i)
- Regular (400)
- Regular Italic (400i)
- Medium (600)
- Medium Italic (600i)
- Bold (700)
- Bold Italic (700i)
- Black (800)
- Black Italic (800i)
Cercando di progettare le interfacce con lungimiranza è possibile abbattere i tempi di caricamento delle font e quindi ridurre il caricamento complessivo della pagina web.
<link href="https://fonts.googleapis.com/css?family=Roboto:400,400i,600,700,700i" rel="stylesheet">
Nell’esempio sopra chiediamo di caricare la font Roboto Regular, Regular Italic, Medium, Bold e Bold Italic. Se avrò intenzione di usare la font Roboto solo per i titoli, che presumibilmente saranno solo in grassetto e forse in corsivo, è corretto pensare di caricare solamente la Roboto Bold e la Roboto Bold Italic.
<link href="https://fonts.googleapis.com/css?family=Roboto:700,700i" rel="stylesheet">
Per finire, un metodo che ci regala qualche millisecondo nel caricamento è il cosiddetto prefetching dei DNS. Ci permette di dire al browser di connettersi alla CDN di Google Fonts appena possibile, cercando di accelerare i tempi della richiesta. Basta aggiungere questa linea di codice nel tag <head> delle pagine web
<link rel="dns-prefetch" href="//fonts.googleapis.com">
Concludo con una impostazione forse meno conosciuta: è possibile caricare una font da Google che abbia al suo interno il minimo indispensabile, cioè i singoli caratteri che possono comporre un testo. È possibile infatti caricare solo una porzione molto specifica dell’intero set di caratteri, risparmiando sul peso in KB.
Ad esempio il testo di seguito utilizza una font non usata all’interno del sito. Occorre caricarla ma è inutile farlo completamente visto l’esigua lunghezza del testo.
Usando il parametro text all’interno della chiamata alla CDN è possibile specificare i caratteri che devono essere caricati per una corretta visualizzazione.
<link href=”https://fonts.googleapis.com/css?family=Merriweather:300&text=Loremipsumsitdoloramet” rel=”stylesheet”>
lorem ipsum sit dolor amet
APPROFONDIMENTI E VARIE
Sidecar propone un articolo che aiuta a identificare in Google Fonts alcune font gratuite alternative a famose font con licenza a pagamento.
Adobe Fonts, previa registrazione, mette a disposizione una importante libreria di font. Offre al suo interno anche le font di Google.
Font Squirrel con il suo generatore di web font kit, permette di convertire le font che avete in locale in webfont compatibili con i browser. Non fa però il servizio CDN, quindi le webfont vanno caricate in un proprio hosting.
