Come aggiungere Google Fonts al tuo sito (3 modi facili)

Per aggiungere un font di Google al tuo sito servono due piccoli lavori: caricare il font e dire al tuo testo di usarlo. Puoi caricarlo con un tag <link> nell’intestazione (l’head) della pagina, con una riga @import in cima al tuo CSS o da file di font che ospiti tu. Il modo più veloce per avere le righe esatte è l’estensione gratuita FontMee: provi il font sul tuo sito, premi Copia CSS e incolli. Qui sotto trovi tutti e tre i modi, con codice da copiare così com’è.

Che cosa significa davvero “aggiungere un font”

Pensa a un font come a un invitato a una cena. Prima devi invitarlo, cioè la tua pagina deve scaricare il file del font. Poi devi dargli un posto a tavola, cioè dire al tuo testo di usarlo. Se salti l’invito, il font non arriva mai. Se salti il posto, resta in un angolo mentre il tuo testo tiene il vecchio font.

Entrambi i lavori si scrivono in CSS, l’insieme di regole di stile che dice a un sito che aspetto avere. L’invito va nell’head della pagina (un’area nascosta in cima all’HTML dove il browser legge le istruzioni) oppure proprio in cima al tuo file CSS. Il posto a tavola è una regola breve, come quella negli esempi qui sotto. Qualunque modo scegli, questi due lavori restano gli stessi.

Modo 1: un tag link nell’head della pagina

È il metodo che Google mostra sul suo sito. Metti tre righe nell’head della pagina: due che dicono al browser di prepararsi a collegarsi a Google e una che carica il font. Di solito si carica un po’ prima degli altri modi, perché il browser può iniziare a prendere il font prima ancora di aver letto il tuo CSS.

<head>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Lora:wght@400;700&display=swap">
  <style>
    h1, h2 { font-family: 'Lora', serif; }
  </style>
</head>

L’ultima parte del link, display=swap, dice al browser di mostrare subito il testo con un font di riserva e di sostituirlo con quello vero appena arriva, così i visitatori non guardano mai uno spazio vuoto. La parola dopo la virgola nella tua regola (serif) è proprio quella riserva, e Google consiglia di metterne sempre una. Usa questo modo quando puoi modificare l’HTML della tua pagina.

Modo 2: una riga @import in cima al tuo CSS

A volte non puoi toccare l’head della pagina, solo il CSS. È il caso del riquadro CSS aggiuntivo di WordPress, della sezione CSS di molti costruttori di siti o di un semplice file style.css. Allora l’invito può vivere dentro il tuo CSS, come una sola riga che deve stare in cima in assoluto, sopra ogni altra regola.

@import url('https://fonts.googleapis.com/css2?family=Lora:wght@400;700&display=swap');

h1, h2 { font-family: 'Lora', serif; }

È il più facile da incollare, ma di solito è un filo più lento del tag link, perché il browser scopre il font solo dopo aver letto il tuo CSS. Su un sito piccolo te ne accorgerai a malapena.

Modo 3: ospita tu i file del font

Qui scarichi i file del font da Google, li carichi sul tuo sito e li indichi nelle regole, così i browser dei tuoi visitatori non contattano affatto Google. Alcuni lo scelgono per la privacy, altri per la velocità, altri perché le regole in merito cambiano da paese a paese, quindi controlla cosa vale per i tuoi visitatori. Servono un paio di passaggi in più, ma niente di difficile: copi una cartella e aggiungi una regola che dice dove sta il file.

@font-face {
  font-family: 'Lora';
  src: url('fonts/lora-latin-400.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}

h1, h2 { font-family: 'Lora', serif; }

I Google Fonts sono open source, quindi puoi scaricarli e ospitarli, anche per progetti commerciali. La parte lenta è trovare e scaricare ogni file e scrivere a mano ogni blocco @font-face. FontMee lo fa per te, come vedrai tra poco.

Quale modo scegliere?

• Puoi modificare l’HTML della pagina: usa il tag link (modo 1).
• Puoi modificare solo il CSS, o usi un costruttore di siti con un riquadro CSS: usa @import (modo 2).
• Vuoi che i browser dei visitatori carichino tutto dal tuo server: ospita i file (modo 3).

Non sei sicuro? Parti dal modo 1 o 2. Puoi cambiare dopo, e cambia solo la riga che carica il font.

Ottieni il codice esatto con FontMee

Scrivere queste righe a mano è dove capitano quasi tutti gli errori: un più dimenticato, un peso che il font non ha, una regola che non combacia con i tuoi titoli. FontMee è un’estensione gratuita di Chrome, un piccolo componente che dà al browser una funzione in più, e scrive le righe per te. Prima provi un font sul tuo sito vero, vedi come sta e poi copi il codice per quella scelta precisa. Ha più di 1.900 font, e il video mostra il pannello in azione.

1. Installa FontMee. Aggiungila dal Chrome Web Store. È gratuita e non chiede un account. Clicca sull’icona del puzzle di Chrome e bloccala in alto, così è sempre a un clic.
2. Apri il tuo sito e clicca sull’icona di FontMee. Il pannello si apre accanto alla pagina. Puoi anche premere Alt + Shift + F. Le pagine di Chrome stesso (Nuova scheda, il Web Store, le pagine chrome://) non si possono modificare.
3. Scegli dove va il font. Sotto Applica le modifiche a scegli Tutto, Titoli o Testo e clicca un font. Puoi fare titoli e testo separatamente.
4. Controlla sulla pagina vera. Passa da Font originale ad Anteprima FontMee e usa Regola per dimensione, peso e altezza di riga finché non va bene.
5. Premi Copia CSS. Si apre una finestra con quattro schede: CSS (il modo @import), HTML (il modo tag link), Variabili e Tailwind per chi li usa. Scegli la scheda che corrisponde al tuo modo, premi Copia negli appunti e incolla nel tuo sito. FontMee chiede a Google solo i pesi che il font ha davvero, così non finisci con un link rotto.
6. Vuoi il modo 3? Nella stessa finestra premi Scarica lo ZIP per l’hosting in proprio. Ottieni una cartella con i file del font, un fonts.css, un fontmee.css e un breve README. Carica la cartella e aggiungi i due link ai fogli di stile.

Quattro cose da controllare prima di pubblicare

• Carica solo ciò che usi. Ogni font e peso in più appesantisce un po’ la pagina. Due font e due pesi bastano per la maggior parte dei siti.
• Tieni un font di riserva. Chiudi ogni font-family con un nome generico come serif o sans-serif, così il testo resta a posto mentre il font si carica.
• Controlla le lettere che ti servono. Accenti come é, ç e ş, e lettere cirilliche o vietnamite, non sono in tutti i font. Guarda le tue parole in FontMee prima di copiare.
• Controlla la licenza. I Google Fonts sono open source e liberi per uso commerciale. La finestra del codice di FontMee elenca la licenza di ogni font, così la vedi prima di pubblicare.

Non hai ancora un sito? Allora il font viene dopo. Un sito ha anche bisogno di una casa in cui vivere, e un costruttore di siti è il modo più rapido per averla senza codice.

Scarica l’estensione

FontMee è gratuita, con oltre 1.900 font, Copia CSS in quattro formati, uno ZIP per l’hosting in proprio e il caricamento dei tuoi font. Senza account, senza abbonamento. Aggiungila dal Chrome Web Store o leggi prima la pagina di FontMee.

Da sapere prima di iniziare

Domande frequenti