12 migliori font Google per siti web (e best practice)

Quando crei un sito web, la scelta del carattere è un aspetto importante dell'aspetto generale del tuo sito. I caratteri devono essere facili da leggere, ma anche esteticamente gradevoli. Se scegli il carattere sbagliato, può interrompere l'esperienza dell'utente e rendere i tuoi contenuti difficili da leggere. Grazie a Google, hai a disposizione molte scelte di font. Dal suo lancio nel 2010, i font di Google hanno fatto molta strada rispetto alle loro 19 offerte di font. Ora ci sono oltre 1450 scelte attualmente disponibili, quindi scegliere i caratteri giusti può essere scoraggiante. In questo post, ti semplificheremo la vita fornendo il nostro elenco dei migliori caratteri Google da utilizzare sul tuo sito web.

Cosa sono i Google Font?

I Google Fonts sono una raccolta di caratteri Web di alta qualità da utilizzare nei progetti Web. Inoltre, tutti i font possono essere scaricati per l'installazione sui sistemi locali. I caratteri vengono inseriti nel tuo sito Web tramite la rete di distribuzione dei contenuti (CDN) di Google e verranno caricati automaticamente una volta installati.

Perché dovresti usare Google Fonts?

Tutti i font sono gratuiti per uso commerciale, quindi possono essere utilizzati sia in progetti web che stampati. Inoltre, tutti i caratteri vengono aggiornati automaticamente, quindi non è necessario preoccuparsi di mantenere le cose aggiornate manualmente. Una volta installato sul tuo sito, non c'è più niente da fare. Come accennato in precedenza, ci sono tantissime opzioni con oltre 1450 famiglie di caratteri. Infine, i caratteri di Google offrono supporto multilingue, quindi se il tuo sito ha più di una lingua installata, sei a posto.

12 migliori caratteri Google disponibili (e sono gratuiti!)

Con così tante opzioni disponibili, può essere complicato sapere quali caratteri scegliere per il tuo sito web. Per fortuna, ti aiuteremo a determinare le famiglie di caratteri più popolari e di tendenza da utilizzare sul tuo sito web. Iniziamo.

1. Robot

Roboto è considerato un carattere a doppio scopo ed è il carattere Google più popolare disponibile. Di forma geometrica, ha anche belle curve ed è generalmente considerato molto facile da leggere. In realtà è stato utilizzato come carattere tipografico per il sistema operativo Android di Google dal 2014.

Ottieni il carattere

2. Apri Sans

Open Sans vanta un aspetto intuitivo e ultra leggibile. È ottimo sia per i titoli che per i testi del corpo. A causa della sua facilità di leggibilità, viene utilizzato come carattere predefinito nel tema Divi.

Ottieni il carattere

3. Montserrat

Con oltre 30 stili, Monsterrat è abbastanza versatile. È stato ispirato da opere d'arte viste nello storico quartiere Montserrat di Buenos Aires durante la prima metà del XX secolo.

Ottieni il carattere

4. Lato

Google descrive Lato come un carattere "serio ma amichevole". Polacco per l'estate, Lato è un carattere multiuso che è generalmente facile da leggere e richiama sentimenti di giocosità estiva.

Oh, a proposito, lo usiamo sul nostro blog.

Ottieni il carattere

5. Poppin

Poppins è un font arrotondato e molto diffuso, adatto sia per l'intestazione che per il corpo del testo. Sviluppato nel 2014 come font open source, Poppins si basa sui sistemi di scrittura Devanagari e Latin.

Ottieni il carattere

6. Fonte Sans Pro

Rilasciato come primo font open source di Adobe, Source Sans Pro è adatto a tutti i design dell'interfaccia utente. È abbastanza versatile e si abbina bene con altri caratteri della nostra lista come Montserrat, Open Sans e Work Sans.

Ottieni il carattere

7. Relaway

Sottile ed elegante, Raleway è un carattere tipografico adatto per intestazioni e sottotitoli. Inizialmente sviluppato nel 2012 come singolo carattere sottile, si è ampliato per includere 9 varianti.

Ottieni il carattere

8. Noto Sans

Noto Sans è abbastanza robusto con le sue 18 varianti di carattere. Inoltre, sono disponibili più di 3.700 glifi con questo incredibile carattere tipografico. Con oltre 18 varianti tra cui più pesi, larghezze e corsivi, Noto Sans è adatto praticamente a qualsiasi design.

Ottieni il carattere

9. Inter

Progettato specificamente per gli schermi dei computer, Inter è il font più recente della nostra lista. Inizialmente rilasciato con il nome di Interface, l'Inter è entrato in scena nel 2017. Viene spesso definito un incrocio tra Helvetica e San Fransisco Pro.

Ottieni il carattere

10. Lastra robotica

Basata sul famosissimo Roboto, la variante Slab è disponibile in quattro pesi: sottile, leggero, regolare e audace.

Ottieni il carattere

11. Beltempo

Essendo uno degli unici caratteri tipografici serif nella nostra lista, Merriweather è giocoso, ma serio. Presenta lettere alte condensate, ma facili da leggere su schermi di tutte le dimensioni. È disponibile anche un font Merriweather Sans che si abbina bene con il suo cugino serif.

Ottieni il carattere

12. Esposizione del parco giochi

Playfair Display trasuda stile vecchio mondo, ma esibisce un tocco moderno. È più adatto per i titoli grazie al suo aspetto imponente. Quando utilizzi Playfair Display, prendi in considerazione l'abbinamento con un font sans serif facilmente leggibile come Roboto, Open Sans, Work Sans o Lato.

Ottieni il carattere

Best practice per l'utilizzo di Google Fonts in WordPress

L'utilizzo dei caratteri di Google è facile e veloce, ma ci sono alcune cose che dovrebbero essere considerate per mantenere il tuo sito fluido e veloce. Per ottenere il massimo dall'utilizzo di questi caratteri, l'ottimizzazione del sito è fondamentale.

Usa solo i caratteri di cui hai bisogno

Quando consideri la velocità del sito, in genere dovresti utilizzare solo due o tre famiglie di caratteri sul tuo sito. Le famiglie di font sono costituite da tutte le iterazioni di un font. Ad esempio, se installi la famiglia Montserrat sul tuo sito, in realtà stai installando 8 caratteri. Le famiglie di caratteri contengono tutte le istanze di un tipo di carattere, che possono includere spessori diversi (normale, medio, semigrassetto, grassetto) e trasformazioni compreso il corsivo.

Usa un plug-in di tipografia

È una buona idea utilizzare un plug-in di tipografia per gestire i caratteri installati sul tuo sito web. Alcuni temi come Divi hanno la gestione della tipografia integrata nel suo framework. I plug-in di tipografia possono aiutarti a gestire non solo i tuoi caratteri, ma anche caratteri tipografici, icone, capolettera e altro ancora.

Scegli buoni abbinamenti di caratteri

Quando scegli i caratteri, prova a scegliere caratteri che funzionino bene insieme. Inoltre, dovresti accoppiare le intestazioni serif con il corpo del testo sans serif. Questo perché l'uso di due caratteri serif insieme rende il testo difficile da leggere. In alternativa, è del tutto accettabile utilizzare due caratteri san serif insieme o anche pesi diversi nella stessa famiglia. Se non sei sicuro di quali abbinamenti di caratteri utilizzare, puoi utilizzare una pratica estensione del browser come Fontpair per semplificare la ricerca dei caratteri utilizzati da un sito Web.

Utilizza i caratteri Google self-hosted

Se scegli di non utilizzare un plug-in di tipografia sul tuo sito WordPress, puoi ospitare i caratteri sul tuo server. Il processo è abbastanza semplice da realizzare in pochi passaggi.

Il primo passo è scaricare il font. Scegli il carattere che desideri scaricare, quindi fai clic sul pulsante Scarica famiglia nell'angolo in alto a destra dello schermo. Tieni presente che quando scarichi il carattere da Google, accetti automaticamente i loro termini di servizio.

Una volta scaricati i caratteri, dovrai spostarli nel tuo progetto. Per questo esempio, useremo Mamp per caricarli sul tema Twenty Twenty.

Quando inserisci i file dei font nel tuo progetto, assicurati di prendere nota della posizione del file. Dovrai aggiungerlo tramite CSS nei prossimi passaggi. Per accedere ai caratteri per il tuo tema, vai a /wp-content/themes/twentytwenty/assets/fonts/ . Se stai usando un tema diverso, sostituisci ventiventi con il nome del tuo tema. Trascina i file dei font scaricati (inclusa la cartella) nella cartella dei font sui tuoi siti WordPress.

Successivamente, trova il carattere scaricato e trascinalo nella cartella risorse/carattere del tuo tema.

Aggiunta del CSS

Successivamente, dovremo aggiungere un po' di CSS al personalizzatore del tema in modo che il nostro carattere venga riconosciuto. Passare a Aspetto > Personalizza .

Fai clic su CSS aggiuntivo nel programma di personalizzazione per aprire l'area di immissione css.

Quindi, aggiungi il seguente codice nell'area CSS aggiuntivo:

@font-face {
    font-family: Roboto;
    src: url(/wp-content/themes/twentytwenty/assets/fonts/Roboto-Regular.ttf);
    font-weight: normal;
}

Per utilizzare il tuo nuovo carattere, fai semplicemente riferimento al carattere utilizzando i CSS. Puoi utilizzare lo strumento di ispezione del browser per applicare il carattere a qualsiasi classe css che ti piace. In questo esempio, vogliamo che il titolo del sito, così come il contenuto della pagina, utilizzino il nostro nuovo font. Per questo esempio, inserisci il seguente CSS:

.entry-title a {
font-family: "Roboto", Arial, sans-serif;
}

.entry-content {
font-family: "Roboto", Arial, sans-serif;
}

Fare clic su Pubblica per salvare le modifiche.

Limita il peso dei caratteri

Allo stesso modo per ridurre al minimo le famiglie di caratteri, dovresti limitare il numero di spessori dei caratteri che utilizzi sul tuo sito web. Se prevedi di utilizzare solo normale, medio e grassetto, non ci sono buoni motivi per includere 18 varianti di un carattere. Chiedere a Google di fornire spessori di carattere extra che non vengono utilizzati aumenterà solo il tempo necessario per caricare i caratteri dai server di Google.

Utilizzo di Google Fonts in Divi

Divi rende i caratteri Google disponibili per impostazione predefinita. I caratteri sono disponibili in qualsiasi modulo che contiene testo. Hai la possibilità di scegliere tra centinaia di caratteri web dalla libreria di caratteri di Google.

Nelle opzioni del tema Divi, puoi scegliere di abilitare Google Fonts, insieme ai sottoinsiemi di caratteri.

Grazie alla funzione di ricerca dei caratteri di Divi, è facile cercare e trovare qualsiasi carattere Google che desideri. Un'altra grande caratteristica di Divi è la possibilità di visualizzare i caratteri utilizzati di recente in alto per un facile accesso.

Puoi anche inserire la chiave API di Google in modo che Divi rimanga aggiornato con le ultime versioni dei caratteri, nonché con quelli nuovi che vengono aggiunti nel repository dei caratteri di Google.

Pensieri finali

Scegliere il carattere giusto per il tuo sito Web può essere un processo travolgente a causa delle molte centinaia di opzioni a tua disposizione. Ricorda solo di scegliere un font che sia facile da leggere e che stia bene con l'atmosfera del tuo design. Abbina i caratteri che si completano a vicenda e cerca di non usarne troppi.

Quali sono alcuni dei tuoi font Google preferiti? Fateci sapere nella sezione commenti qui sotto.