Come scegliere i font perfetti per il tuo sito – Parte 2

come scegliere i font perfetti per il tuo sito parte 2

Ciao e bentornata/o sulla rubrica del Fabbro.

Attenzione: questa è la parte conclusiva di un articolo precedente. Fai click qui per leggere la parte introduttiva se te la sei persa!

La scorsa settimana abbiamo parlato su queste pagine dell’importanza dei font. Ti ho spiegato le differenze tra font Serif e Sans Serif e in quali casi è meglio utilizzare uno o l’altro.

L’obiettivo di oggi è fornirti un metodo rapido e sicuro per selezionare delle combinazioni di font vincenti.
Ti indicherò dei siti web affidabili su cui poter ricercare e scaricare i font e, infine – ma più importante – ti mostrerò come inserirli sul tuo sito WordPress.

Ma prima ti chiedo: hai fatto i compiti che ti avevo assegnato? Se sì sono convinto che adesso il tuo modo di osservare i siti web è cambiato e non tornerà più come prima. Questo è un bene e farà sì che da questo momento in poi sceglierai sempre con cura i font per i tuoi siti web.
Non hai fatto l’esercizio che ti avevo assegnato? Don’t panic, tivvibì lo stesso, però recuperalo perché è importante.

Fine del preambolo. Sei pronta/o? Afferra una tazza del tuo caffè preferito e… partiamo!

caffè

Qual è il metodo più veloce per selezionare i font giusti?

In realtà questa domanda nasconde un tranello. Non dovresti mai scegliere velocemente i font per il tuo sito, a meno che tu non sia un esperto e abbia un livello di consapevolezza molto alto in materia.

Come ti avevo già accennato nella prima parte dell’articolo, devi dedicare la massima cura ai font del tuo sito e trattarli a tutti gli effetti come un elemento grafico.

Però mi rendo conto che, a volte, può essere comodo realizzare la bozza di un sito con una combinazione di font già collaudata e “funzionante”. Grazie a questo metodo, puoi cambiare combinazioni di font rapidamente e trovare uno stile su cui orientarti. Sarà poi più facile prendere una decisione definitiva dopo qualche ora di esperimenti.

È per questo che ti consiglio subito di dare un’occhiata al sito Fontpair.
Su Fontpair hai a disposizione migliaia di combinazioni di font tra cui poter scegliere.
Tutte queste combinazioni funzionano e molte le ho già provate personalmente, perciò sentiti libero e sicuro di utilizzarle.
Tutti i font che trovi su Fontpair sono Google Fonts.
Ma questo cosa significa? Tranquilla/o perché ci arriveremo.

Oltre a Fontpair esistono altri siti da cui puoi prendere ispirazione per la scelta dei font.
Google Type è uno di questi. È molto simile a Fontpair, però è visivamente più accattivante.
Quando atterri sul sito puoi scorrere in basso e visualizzare diverse schermate con titolo e paragrafi su sfondo colorato.

In cima ad ogni schermata trovi i nomi dei font utilizzati (osserva lo screenshot in basso: i font utilizzati in questo riquadro sono Playfair Display e Fauna One):

google type font usati

Di recente invece ho scoperto un altro sito ancora che mi ha letteralmente fatto impazzire.
Il suo nome è Mixfont e utilizzarlo non è soltanto utile, ma soprattutto divertente!

Non ci credi? Collegati subito sul sito e fai click sul bottone “Start the Generator!”
Verrai re-indirizzato su una pagina che ti mostra una combinazione casuale di font. Scorrendo la pagina più in basso, noterai che ci sono anche altri elementi (box di testo e finte schermate di app) che puoi osservare per valutare meglio l’accostamento tra i due font.

Se la pagina che stai navigando non ti piace, prova a schiacciare il tasto “spazio” sulla tua tastiera.

Et voilà! In un secondo verrai re-indirizzato su un’altra pagina contenente al suo interno una combinazione di font diversa.

Divertente, vero? Per invertire l’utilizzo dei font (cioè per scambiare il font dei titoli con quello dei paragrafi) fai click sulla voce in alto a destra “Swap”. Osserva lo screenshot in basso se non la trovi:

mixfont tasto swap

Questi 3 siti web di cui ti ho appena parlato sono comodi perché ti permettono di scegliere tra migliaia di combinazioni di font in modo rapido e sicuro.

Ma scommetto che adesso nella tua testa si sta formando una domanda:
“Tutto molto bello, Fabbro. Però come faccio a scaricare questi font e ad usarli sul mio sito web?”

Ottima domanda. Per semplificare, dividiamola in due domande e iniziamo rispondendo a:

Dove posso scaricare i font migliori per il mio sito?

Il web è pieno zeppo di siti da cui puoi scaricare font, ma non è tutto oro ciò che luccica.

Infatti molti dovresti evitarli perché contengono tanta pubblicità e ti aprono popup e schede strane sul pc.

I 3 che ti indicherò invece sono affidabili e dentro ci trovi tutti i font di cui hai bisogno.

Partiamo dal numero 1 che è Google Fonts.

Google Fonts è una libreria di font che puoi utilizzare gratuitamente per tutti i tuoi siti web.

Collegati al sito, scrivi il nome del font di cui hai bisogno e fai click sul relativo box di testo che ti comparirà in basso (osserva lo screenshot):

ricerca font su google fonts

Verrai re-indirizzato su un’altra schermata su cui dovrai cliccare il bottone in alto a destra “Download family”. Per family si intende tutta la famiglia del font, ovvero la versione Bold (usata per il grassetto), la Italic (per il corsivo) e tante altre.

“Ok Fabbro, ma a cosa servono tutte le altre versioni tipo medium e light?”

Ottima domanda. Intendo approfondire la tematica più avanti nell’articolo perché qui andremmo fuori tema. Per ora pensa questo: più ne hai e meglio è perché ciò ti offre più libertà di personalizzazione.

font light e bold

DaFont è un altro sito simile a Google Fonts e ti consente di filtrare la ricerca in modo dettagliato. Le categorie di font presenti sono tantissime e diverse tra loro: Fantasia, Stranieri, Techno, Bitmap, Gotici, Basico, Script, Simboli e Vacanze.

Fai click sul font che ti ispira e poi, all’interno della schermata seguente, su “Scarica”. Prima di scaricare il font, però, scorri in basso e guarda se nel font sono presenti caratteri accentati e apostrofi.

schermata dafont

Il motivo per cui personalmente preferisco Google Fonts è che raramente incappo in font senza accenti e apostrofi.

Se scarichi un font senza caratteri accentati e lo usi sul tuo sito, quando scrivi “perché”, l’utente visualizza “perch[]”. Quindi mi raccomando: usa DaFont per scaricare tutti i font che vuoi, ma accertati che siano completi.

L’ultimo sito di cui voglio parlarti è Font Squirrel. Questo sito è più simile a DaFont che a Google Fonts, però la differenza è che puoi trovare anche font a pagamento.

Anche qui vale lo stesso discorso di DaFont per quanto riguarda caratteri accentati e apostrofi, però per capire se un font ne è sprovvisto devi fare un’altra operazione.

Collegati al sito, fai click su un font qualsiasi e poi spostati alla voce “Glyphs”. Qui dentro puoi osservare tutti i caratteri del font e scoprire se accenti e apostrofi sono presenti.

schermata font squirrel glyphs

Adesso che sai dove trovare tutti i font di cui hai bisogno non mi resta che spiegarti come utilizzarli sul tuo sito.

Come installare i font sul sito

I modi per installare font sul tuo sito sono diversi in base al tema che utilizzi.

Di solito, comunque, i temi WordPress decenti hanno già al loro interno tutti i font di Google Fonts.

Proprio così.

Se vuoi utilizzare uno dei font di Google Fonts e il tuo tema ti offre questa possibilità, non devi installarli.

Di solito devi andare nelle impostazioni del tema e selezionare da un menù a tendina i font che vuoi usare.

Se non trovi questa opzione o pensi che non esista sul tuo tema, segnalamelo nei commenti, saprò come aiutarti.

E se i font che vuoi utilizzare non sono presenti su Google Fonts? In quel caso esistono due soluzioni:

  • puoi installare i font sul sito tramite accesso FTP, scrivere un po’ di righe CSS e sperare tutto fili liscio. Cito questo metodo solo per completezza ma ti sconsiglio fortemente di prenderlo in considerazione.
  • Puoi installare un plugin e configurare i tuoi font in pochi click. Scelta fortemente consigliata, però attenzione: anche questa non è una soluzione semplicissima.

Per utilizzare il plugin Custom Fonts devi anzitutto installarlo e attivarlo. Se è la prima volta che senti parlare di plugin e vuoi saperne di più, fai click qui.

schermata custom fonts

Una volta attivato il plugin, collegati alla voce “Personalizza” -> “Custom Fonts”.

In questa schermata, compila i campi sul modulo a sinistra come segue:

  • Nome. Inserisci il nome del font.
  • Font Fallback. Fallback è un termine molto aggressivo, ma cerco di semplificarlo al massimo. Delle volte può capitare che il font che usi sul sito non venga caricato correttamente nel browser di chi lo naviga. Esempio: tu usi un font particolare ma io, quando navigo il tuo sito, non lo vedo come lo vedi tu. Dentro Font Fallback puoi indicare il font da farmi vedere al posto di quello che hai scelto (nel caso in cui non avvenga il corretto caricamento); in pratica un font sostitutivo. Che font indicare? Se si tratta di un font Serif scrivi “Times New Roman, Serif”; se è un Sans Serif scrivi “Arial, Sans Serif”.
  • Font Display. Lascialo su “auto”. In questo articolo mi è davvero impossibile descriverti a cosa serve questa opzione, cerco di semplificare all’osso: sono istruzioni da dare al sito in base a determinati tempi di caricamento del font. Lascia su “auto” e sei a posto.
  • Font Weight. Ricordi i vari “Thin” e “Medium”? Ecco, qui devi selezionare il “peso” del font. Se ci fai caso, di fianco al testo c’è un numero. Thin ha di fianco il numero 100, mentre “Ultra Bold” (che è l’ultimo in basso) ha di fianco il numero 900. In pratica più è basso il numero e più sottile è il font. Di solito ti conviene scegliere “Regular” o “Normal” per i font dei paragrafi. Per i titoli il consiglio è di sperimentare finché non trovi quello che meglio crea contrasto col font per i paragrafi.
  • Font .woff ecc. Qui dentro devi selezionare l’estensione del file. Scarica un font, poi aprilo e guarda cosa c’è dentro. Se trovi il .woof fai click su “Upload” e carica quello, se invece trovi il “.ttf”, clicca su “Upload” di fianco a .ttf e carica quello.

Quando hai finito fai click sul bottone blu in basso “Add New Font”. Ripeti il procedimento per ogni font che vuoi aggiungere.

Fatto? Grande, ma non abbiamo ancora finito. Adesso dobbiamo far capire a WordPress quando vogliamo usare i font che abbiamo installato.

Nota: se usi Elementor puoi saltare il passaggio in basso, il tema è già configurato per poter lavorare con questo plugin.

Portati su “Personalizza” e seleziona la voce “CSS aggiuntivo” (vedi screenshot in basso):

personalizza - css aggiuntivo

Qui dentro adesso scriveremo del codice, sei emozionata/o? Ok, don’t panic. In realtà è più semplice di quello che sembra: scrivo io il codice e tu lo copi/incolli.

bottone don't panic

Osserva questo codice:

h1, h2, h3, h4, h5, h6 {
font-size: 1.2em !important;
font-family: ‘metti qui il nome del font’ !important;
}

p, ul, li, a {
font-size: 1em !important;
font-family: ‘metti qui il nome del font’ !important;
}

Per analizzare queste poche righe di codice in modo approfondito ci vuole un articolo a parte, ma se l’argomento ti interessa segnalamelo nei commenti.

Copia e incolla questi codici dentro la schermata “CSS aggiuntivo” e poi effettua questa operazione:
dove ho scritto “metti qui il nome del font” dentro “h1, h2, h3 ecc.” scrivi il nome del font che usi per i titoli.

Nota: dev’essere uguale al nome che hai scritto dentro al modulo del plugin “Custom Fonts”, altrimenti non funzionerà.

Invece su “p, ul, li, a”, dove ho scritto “metti qui il nome del font” scrivi il nome di quello che usi per i paragrafi.

Se esegui questo passaggio correttamente devi vedere nella schermata a destra dell’anteprima i font che hai scelto al posto di quelli vecchi. Se non riesci a visualizzare i font “nuovi” nell’anteprima, probabilmente hai commesso un errore da qualche parte. Don’t panic e scrivimi nei commenti.

Nota: su “font-size:” ho indicato la grandezza del carattere. In base al font che hai scelto, potresti aver bisogno di aumentare o ridurre questa grandezza. Se vuoi aumentare ad esempio le dimensioni del font che usi per i paragrafi, al posto di “1em” dentro “p, ul, li, a” scrivi 1.1, oppure 1.2 e così via. Stesso discorso per il codice “font-size” sotto “h1, h2, h3 ecc.”.

Complimenti: hai appena inserito un codice CSS sul tuo sito!

Conclusioni
Mission complete! Da adesso hai tutti gli strumenti per poter scegliere i font perfetti per il tuo sito.

schermata metal slug mission complete

Ti è piaciuto l’articolo? Fammelo sapere nei commenti.

Vuoi continuare a leggere guide gratuite come queste? Allora iscriviti subito alla rubrica del Fabbro per non perdertene neanche una. Pubblicherò una guida gratuita ogni martedì per aiutarti a gestire in completa autonomia il tuo sito web. Fai click qui e vedrai che presto per te sarà facilissimo usare il martello per spaccare il web!

A martedì prossimo,
Il Fabbro

Richiedi la consulenza GRATUITA del Sarto

Fai click qui!

6 pensieri su “Come scegliere i font perfetti per il tuo sito – Parte 2

    • Il Fabbro dice:

      Ciao Paola, la cosa che personalmente apprezzo molto di Dafont è la varietà di filtri che si possono applicare per la ricerca. Si possono sfogliare i font per ordine alfabetico, per autore, per temi, per paesi e popolarità. Si può andare ancora più a fondo andando a filtrare anche per “100% gratis” e “Solo caratteri con accenti”, e penso questo faccia risparmiare molto tempo. Hai avuto brutte esperienze con questo sito in passato? O magari ti trovi meglio su siti come “Fontspace” e “Befonts”? Se sì, per quali motivi? Grazie del commento 🙂

  1. Paola Pisetta dice:

    Dai per scontate un sacco di cose mio caro Fabbro.
    Io ci ho messo un bel po’ di tempo a capire di cercare bene i font gratuiti, con gli accenti e tutto il corollario.

    Come sempre e come dice il Sarto non è lo strumento sbagliato è chi lo usa.

    • Il Fabbro dice:

      Certo, considera che questa è la parte conclusiva di un articolo introduttivo sull’utilizzo dei font. È la prima volta che tratto questo contenuto sulla rubrica e pubblicherò col tempo altri articoli per approfondire la tematica. ☕️

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *