Una delle cose più gratificanti nell'essere un web designer è pubblicare il proprio sito web e vedere le persone apprezzarlo, utilizzarlo, “coccolarlo”. Tuttavia, non c'è nulla di più frustrante di scoprire che il tuo sito web è lento come una tartaruga, specie quando si scopre che il problema sono proprio i font. Questo é un problema abbastanza comune che molte persone affrontano, e in questo articolo parleremo di come ottimizzare le fonts su Webflow per garantire un sito web veloce e performante.
Probabilmente siete andati su https://pagespeed.web.dev/, avete caricato il vostro sito aspettandovi velocitá astronomiche, per poi rendervi conto che c’é una lista infinita di fonts che vengono caricati e che occupano decisamente troppo spazio.
Ci sono passato, ci ho sbattuto la testa piú volte, ma alla fine ho trovato la soluzione per avere tutto sotto controllo. In questa guida vi spiegheró passo per passo come ottimizzate il vostro sito, e le migliori accortezze da seguire per quanto riguarda l’utilizzo dei vostri fonts su Webflow.
Riducete il numero di font utilizzati
Anche per quanto riguarda i principi base del design, di solito un sito web rimane molto piú pulito e coerente quando si utilizzano due famiglie diverse di fonts, per esempio un Futura per i titoli e le intestazioni, e un Poppins per il testo e i paragrafi.
Si puó anche averne tre diversi a volte, ma non eccedete, perché non solo aumenterete il peso di caricamento delle pagine, ma renderá anche il design decisamente meno coerente per gli utenti che lo utilizzano.
Controllate che stiate utilizzando le fonts giuste
Come seconda cosa vi consiglio di stare sempre attenti che non ci siano font superflui utilizzati all’interno del sito, perché siamo umani e facciamo errori, e volte puó capitare di dimenticare qualcosa, o aggiungerne una superflua. Per scovare gli eventuali fonts “fantasma” all’interno del vostro progetto, prima di tutto é importantissimo eliminare tutte le classi inutilizzate.
Nel designer, premente “G” per accedere allo Style Manager nel pannello sulla destra, e rimuovete tutto le classi superflue cliccando “Clean Up”, e questo e giá metá del lavoro fatto.
Successivamente, se vi accorgete di avere ancora fonts che vi creano il mal di testa aggirandosi sul vostro sito, cliccate in alto sulla figura <> con il nome “Export Code” (di fianco al tasto Publish), dategli il tempo di caricare, e poi selezionate CSS.
Una volta all’interno avrete accesso al catalogo completo di tutto il file, con la lista per esteso di tutte le classi CSS e dei parametri utilizzati.
Il trucco finale stá infine nell’andare a cercare tutte le famiglie di font utilizzate, una per una, all’interno del file. Cliccate quindi Ctrl+F per utilizzare l’opzione cerca, e all’interno del campo scrivete “font-family”.
A questo punto il gioco é praticamente fatto! Da li procedete ad ispezionare i risultati uno per uno, e quando vedrete il vostro font “fantasma” avrete finalmente la precisa idea di dove andarlo a stanare semplicemente associandolo alla classe che stá utilizzando il font al momento.
Come Fontforge viene in aiuto per compressare i fonts
Questo é il colpo di grazia, la tecnica che vi permetterá d’ora in avanti di dormire tranquilli e beati sapendo di aver fatto un lavoro eccellente, e potrete darvi una pacca sulla schiena mangiando un pezzo di cioccolato.
Ma vediamo come ci potremo gustare il nostro cioccolato, partendo dalle basi.
All’interno della maggior parte dei font-files che troverete online o che acquisterete, ci saranno mappati una serie di “Glifi” creati dall’autore stesso del font.
Questi Glifi sono la rappresentazione di ogni singolo carattere che l’autore ha impostato per venire utilizzato da chiunque ne faccia uso, quindi troverete all’interno tutte le lettere dell’alfabeto, i simboli i numberi e cosí via.
Tutto molto bello, ma a cosa ci serve sapere questa informazione?
Ebbene, dovete sapere che all’interno di molti file, non solo si trovano i Glifi che corrispondono ai caratteri latini (A,B,C,D etc etc), ma anche una miriade di altri caratteri in altre lingue del mondo.Se quindi il vostro sito non ha come target nessun paese che non utilizza caratteri latini, possiamo tranquillamente andare a rimuovere tutto il superfluo per rendere il file incredibilmente piú piccolo.
- Scaricate Fontforge andando su questo link: https://fontforge.org/en-US/downloads/Avviate tutte le procedure di installazione e aprite il programma, cercate font che desiderate modificare sul vostro computer ed apritelo.
- A questo punto si aprirá una grossa tabella con tutti i Glifi all’interno del file. Tutti i caratteri latini, i numeri e simboli che che di solito utilizziamo si trovano nelle prime righe, quindi possiamo semplicemente andare a cancellare tutto il resto.
- Selezionare tutti quei caratteri che volete rimuovere state attenti a non selezionare il quadrato con il carattere stesso, ma premete sul rettangolo direttamente sopra al carattere, e per selezionarne molteplici tenete premuto il tasto sinistro del mouse e trascinatelo in giro.
- Una volta selezionato i caratteri da eliminare, premete il tasto destro e cliccate “Clear”.
- Ora che avete eliminato tutto il superfluo, andate in alto a sinistra per generare il nuovo file cliccando “generate fonts”. Si aprirá una finestrella, cambiate il nome del file come volete, e ricordatevi assolutamente di cambiare il formato in WOFF2.
- Cliccate “generate” poi ancora “yes” e ancora “generate”, quando vi usciranno i pop up di errore, dato che non dovrete preoccuparvi di niente.
Video spiegazione con variante
Conclusioni
Fatto, ora siamo tutti piú felici e possiamo finalmente caricare il nostro nuovo font perfettamente compressato su Webflow, e dormire sonni tranquilli.
Ricordate, ottimizzare le fonts su Webflow é fondamentale per avere un sito web veloce e performante. Riducete il numero di font utilizzati e controllate sempre che ci sia solo quello che serve davvero. Utilizzate Fontforge per comprimere i font e avrete un sito web leggero come una piuma. E con questo, potete gustarvi tutto il cioccolato che volete sapendo di aver fatto un ottimo lavoro!
