Migliori font per siti web: 30 Google Fonts gratuiti in layout reali

I migliori font per siti web sono leggibili a piccole dimensioni, si caricano in fretta e si adattano al brand: Inter o Geist per i siti di prodotto, Source Serif 4 o Newsreader per la lettura, Rubik o Nunito per le attività locali. Ecco 30 Google Fonts gratuiti mostrati dal vivo, con licenze, assi variabili e CSS da copiare.

Aggiornato il 13 ottobre 2026

Ecco 30 font gratuiti di Google Fonts che funzionano bene su siti web reali, ordinati in base al lavoro che svolgono meglio. Ognuno è mostrato qui sotto in un titolo, un paragrafo e un pulsante, con la sua licenza, l'indicazione se è un font variabile, i pesi disponibili, uno stack di fallback e uno snippet pronto da copiare. I dati sono stati verificati a ottobre 2026 sul catalogo di Google Fonts e sui file di licenza nel repository di Google Fonts.

Scelte rapide

• SaaS o app: Inter o Geist per tutto, oppure Plus Jakarta Sans per una landing page più calda.
• Blog o pubblicazione: Source Serif 4 o Newsreader per il testo, con un sans per la navigazione.
• Attività locale: Rubik, Nunito o Work Sans, leggibili sul telefono e accoglienti.
• Brand premium o classico: Playfair Display o EB Garamond per i titoli, con un sans sobrio per il testo.
• Molte lingue: Noto Sans.

Prova con il tuo testo

Scrivi qui sotto per sostituire il testo di esempio in tutte le anteprime della pagina. I font vengono caricati da Google Fonts quando apri questa sezione; fino ad allora ogni anteprima mostra il suo stack di fallback, che è anche ciò che i visitatori vedono per un attimo mentre un web font si scarica.

Tutti i 30 font a colpo d'occhio

Tutti e 30 sono rilasciati con la SIL Open Font License 1.1, che consente l'uso commerciale, l'incorporamento nei siti web e il self-hosting, e permette di modificare i font a patto di non vendere i file dei font da soli e di non riutilizzare i nomi riservati per le versioni modificate. Un piccolo numero di famiglie di Google Fonts usa altre licenze aperte: alcune sono sotto Apache License 2.0 (per esempio Permanent Marker e Special Elite) e la famiglia Ubuntu usa la Ubuntu Font Licence. Controlla sempre la licenza indicata sulla pagina della famiglia su fonts.google.com prima di pubblicarla.

<link href="https://fonts.googleapis.com/css2?family=Inter:[email protected]&display=swap" rel="stylesheet">

/* CSS */
font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

<link href="https://fonts.googleapis.com/css2?family=Geist:[email protected]&display=swap" rel="stylesheet">

/* CSS */
font-family: "Geist", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

<link href="https://fonts.googleapis.com/css2?family=DM+Sans:[email protected]&display=swap" rel="stylesheet">

/* CSS */
font-family: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

<link href="https://fonts.googleapis.com/css2?family=Manrope:[email protected]&display=swap" rel="stylesheet">

/* CSS */
font-family: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:[email protected]&display=swap" rel="stylesheet">

/* CSS */
font-family: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:[email protected]&display=swap" rel="stylesheet">

/* CSS */
font-family: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

<link href="https://fonts.googleapis.com/css2?family=Figtree:[email protected]&display=swap" rel="stylesheet">

/* CSS */
font-family: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:[email protected]&display=swap" rel="stylesheet">

/* CSS */
font-family: "Space Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

<link href="https://fonts.googleapis.com/css2?family=Merriweather:[email protected]&display=swap" rel="stylesheet">

/* CSS */
font-family: "Merriweather", Georgia, "Times New Roman", serif;

<link href="https://fonts.googleapis.com/css2?family=Lora:[email protected]&display=swap" rel="stylesheet">

/* CSS */
font-family: "Lora", Georgia, "Times New Roman", serif;

<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:[email protected]&display=swap" rel="stylesheet">

/* CSS */
font-family: "Playfair Display", Georgia, "Times New Roman", serif;

<link href="https://fonts.googleapis.com/css2?family=Source+Serif+4:[email protected]&display=swap" rel="stylesheet">

/* CSS */
font-family: "Source Serif 4", Georgia, "Times New Roman", serif;

<link href="https://fonts.googleapis.com/css2?family=Libre+Baskerville:[email protected]&display=swap" rel="stylesheet">

/* CSS */
font-family: "Libre Baskerville", Georgia, "Times New Roman", serif;

<link href="https://fonts.googleapis.com/css2?family=EB+Garamond:[email protected]&display=swap" rel="stylesheet">

/* CSS */
font-family: "EB Garamond", Georgia, "Times New Roman", serif;

<link href="https://fonts.googleapis.com/css2?family=Fraunces:[email protected]&display=swap" rel="stylesheet">

/* CSS */
font-family: "Fraunces", Georgia, "Times New Roman", serif;

<link href="https://fonts.googleapis.com/css2?family=Newsreader:[email protected]&display=swap" rel="stylesheet">

/* CSS */
font-family: "Newsreader", Georgia, "Times New Roman", serif;

<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap" rel="stylesheet">

/* CSS */
font-family: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

<link href="https://fonts.googleapis.com/css2?family=Montserrat:[email protected]&display=swap" rel="stylesheet">

/* CSS */
font-family: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

<link href="https://fonts.googleapis.com/css2?family=Nunito:[email protected]&display=swap" rel="stylesheet">

/* CSS */
font-family: "Nunito", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

<link href="https://fonts.googleapis.com/css2?family=Rubik:[email protected]&display=swap" rel="stylesheet">

/* CSS */
font-family: "Rubik", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

<link href="https://fonts.googleapis.com/css2?family=Work+Sans:[email protected]&display=swap" rel="stylesheet">

/* CSS */
font-family: "Work Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

<link href="https://fonts.googleapis.com/css2?family=Outfit:[email protected]&display=swap" rel="stylesheet">

/* CSS */
font-family: "Outfit", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

<link href="https://fonts.googleapis.com/css2?family=Roboto:[email protected]&display=swap" rel="stylesheet">

/* CSS */
font-family: "Roboto", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;

<link href="https://fonts.googleapis.com/css2?family=Open+Sans:[email protected]&display=swap" rel="stylesheet">

/* CSS */
font-family: "Open Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

<link href="https://fonts.googleapis.com/css2?family=Lato:wght@400;700&display=swap" rel="stylesheet">

/* CSS */
font-family: "Lato", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

<link href="https://fonts.googleapis.com/css2?family=Noto+Sans:[email protected]&display=swap" rel="stylesheet">

/* CSS */
font-family: "Noto Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

<link href="https://fonts.googleapis.com/css2?family=Source+Sans+3:[email protected]&display=swap" rel="stylesheet">

/* CSS */
font-family: "Source Sans 3", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

<link href="https://fonts.googleapis.com/css2?family=Oswald:[email protected]&display=swap" rel="stylesheet">

/* CSS */
font-family: "Oswald", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

<link href="https://fonts.googleapis.com/css2?family=Archivo:[email protected]&display=swap" rel="stylesheet">

/* CSS */
font-family: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:[email protected]&display=swap" rel="stylesheet">

/* CSS */
font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

Come caricare un Google Font

Inserisci queste righe nell'<head> della pagina, prima del tuo foglio di stile. I due hint preconnect permettono al browser di aprire in anticipo le connessioni all'host del foglio di stile e a quello dei file dei font; i file dei font sono serviti da un dominio diverso e vengono richiesti in modalità CORS, ed è per questo che il secondo hint ha crossorigin.

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:[email protected]&family=Source+Serif+4:ital,wght@0,400..700;1,400..700&display=swap" rel="stylesheet">

body { font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; }
h1, h2, h3 { font-family: "Source Serif 4", Georgia, "Times New Roman", serif; }

Leggere l'URL css2

• family=Inter:[email protected] richiede un intervallo di pesi da un font variabile. Restringi l'intervallo a quello che usi; il browser scarica comunque un file per ogni subset.
• family=Lato:wght@400;700 richiede due pesi statici specifici. Per le famiglie statiche, ogni peso che elenchi è un file in più.
• ital,wght@0,400..700;1,400..700 aggiunge gli stili corsivi. I nomi degli assi vanno in ordine alfabetico, le minuscole prima delle maiuscole.
• Ripeti family= per caricare più famiglie con una sola richiesta.
• display=swap imposta font-display: swap nelle regole @font-face restituite, così il testo appare subito nel font di fallback e cambia quando arriva il web font, invece di restare invisibile.
• text=Hello restituisce un file che contiene solo quei caratteri, utile per una parola del logo composta in un font che non usi altrove.

Opzioni di font-display

Self-hosting

Poiché questi font hanno licenze aperte, puoi servire i file dal tuo dominio invece che da quello di Google. I motivi per farlo: una connessione a terzi in meno, pieno controllo sulla cache e privacy, dato che le richieste ai server di Google inviano a Google l'indirizzo IP del visitatore, cosa che alcuni gestori di siti europei preferiscono evitare. Come farlo:

• Scarica la famiglia dalla sua pagina su fonts.google.com, converti o tieni i file WOFF2 e scrivi le tue regole @font-face.
• In un progetto JavaScript, installa la famiglia da Fontsource (per esempio npm install @fontsource-variable/inter) e importala nel file di ingresso.
• I progetti Next.js possono usare next/font/google, che scarica i file in fase di build e li serve dal tuo dominio.

@font-face {
  font-family: "Inter";
  src: url("/fonts/inter-latin-var.woff2") format("woff2");
  font-weight: 100 900;      /* the variable range */
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF;
}

Con il self-hosting, precarica solo l'unico file che serve al testo above the fold, con <link rel="preload" href="/fonts/inter-latin-var.woff2" as="font" type="font/woff2" crossorigin>. Precaricare più font li mette in competizione con immagini e script.

Note sui font variabili

Un font variabile è un unico file che contiene un intervallo continuo lungo uno o più assi, invece di un file per ogni peso. 28 dei 30 font qui sono variabili; Poppins e Lato sono statici.

• Il peso (wght) si controlla con la normale proprietà font-weight, e qualsiasi numero nell'intervallo funziona: font-weight: 650 è valido.
• La larghezza (wdth), offerta qui da Roboto, Open Sans, IBM Plex Sans, Noto Sans, Archivo e Merriweather, corrisponde a font-stretch in percentuale, per esempio font-stretch: 85%.
• La dimensione ottica (opsz), in Inter, DM Sans, Source Serif 4, Newsreader, Merriweather e Fraunces, adatta la forma delle lettere alla dimensione a cui sono composte. I browser la applicano automaticamente in base alla dimensione del font perché font-optical-sizing vale auto per impostazione predefinita. Per ottenerla, richiedi l'asse nell'URL (per esempio family=Inter:opsz,[email protected],100..900).
• Gli assi personalizzati come SOFT e WONK di Fraunces si impostano con font-variation-settings: "SOFT" 100, "WONK" 1;. Dove esistono, usa le proprietà standard per peso, larghezza e inclinazione al posto di questa, perché i valori di font-variation-settings non si combinano tra regole diverse.
• Un file variabile è più pesante di qualsiasi singolo peso statico. Conviene quando usi circa tre o più pesi, e quando vuoi pesi intermedi per le rifiniture.

h1 { font-weight: 780; font-stretch: 90%; }
.lede { font-weight: 350; }
.fun-heading { font-family: "Fraunces", Georgia, serif; font-variation-settings: "SOFT" 100, "WONK" 1; }

Font web-safe e stack di font di sistema

I font "web-safe" sono quelli installati su quasi ogni computer Windows e Mac, quindi non richiedono download. Non sono garantiti su Android, Linux o su ogni iPhone, ed è per questo che uno stack di font termina sempre con una famiglia generica come sans-serif o serif.

Uno stack di font di sistema va oltre e usa il font dell'interfaccia di ciascun sistema operativo: San Francisco sui dispositivi Apple, Segoe UI su Windows, Roboto su Android e di solito Noto o un altro predefinito su Linux. Non costa nulla da caricare e ha un aspetto nativo. Questi sono gli stack che consigliamo al momento della stesura:

/* Sans: the operating system's interface font */
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
  "Helvetica Neue", Arial, "Noto Sans", sans-serif,
  "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji";

/* Serif */
font-family: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;

/* Monospace */
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
  "Liberation Mono", "Courier New", monospace;

system-ui è supportato da tutti i principali browser attuali. -apple-system e BlinkMacSystemFont servono solo ai browser più vecchi sui dispositivi Apple e si possono togliere se non li supporti. ui-serif e ui-monospace non sono riconosciuti da tutti i browser, ed è per questo che ogni stack prosegue con font specifici. I font emoji stanno alla fine, così i caratteri emoji vengono mostrati a colori.

Questo paragrafo è composto con lo stack sans di sistema, quindi mostra il font dell'interfaccia del tuo dispositivo.

Note sulle prestazioni

• Usa meno famiglie e pesi. Ogni peso statico, ogni corsivo e ogni famiglia in più è un altro file. Due famiglie, oppure una famiglia variabile più il suo corsivo, bastano per la maggior parte dei siti.
• Preferisci WOFF2. È il formato di web font più compresso e tutti i browser attuali lo supportano. Google Fonts lo serve automaticamente.
• Crea subset per lingua. Il foglio di stile di Google Fonts divide già ogni famiglia in subset con unicode-range, quindi una pagina solo in inglese scarica soltanto il file latino. Fai lo stesso con il self-hosting.
• Riduci gli spostamenti del layout durante lo swap. Se il fallback e il web font hanno larghezze diverse, il testo si riorganizza quando arriva il font. Scegli un fallback con proporzioni simili, oppure regolalo con size-adjust, ascent-override e descent-override in un @font-face di fallback. next/font e alcuni strumenti di build generano questi valori per te.
• Non nascondere il testo. Senza font-display: swap o optional, i browser possono non mostrare alcun testo per un breve periodo mentre i font si scaricano, il che ritarda il momento in cui la pagina diventa leggibile.
• Misura, non tirare a indovinare. Fai passare la pagina in un test di laboratorio prima e dopo aver cambiato i font. La nostra guida a PageSpeed Insights spiega su quali numeri incidono i font.

Suggerimenti per abbinare i font

Abbina font che differiscono in modo netto (un serif con un sans, oppure un carattere display largo con un semplice carattere da testo) e che abbiano qualcosa in comune, come un'altezza della x simile o lo stesso mood. Limitati a due famiglie. Queste combinazioni usano solo font di questa pagina:

Per provare altre combinazioni fianco a fianco, usa lo strumento per abbinare i font. Per i colori adatti ai tuoi caratteri, vedi le combinazioni di colori per siti web, e per layout pronti che usano questi font, sfoglia i componenti per sezioni hero.

Domande frequenti

Qual è il miglior font per un sito web?

Non esiste un unico font migliore, ma Inter, Source Sans 3 e Open Sans sono scelte affidabili per il testo, perché restano nitidi a piccole dimensioni. Per i titoli scegli un font con più carattere, adatto al brand, come Playfair Display, Fraunces o Space Grotesk.

I Google Fonts sono gratuiti per uso commerciale?

Sì. Tutte le famiglie di Google Fonts hanno una licenza aperta, per lo più la SIL Open Font License 1.1, alcune la Apache License 2.0 e la Ubuntu Font Licence. Tutte e tre consentono l'uso commerciale su siti web, app e stampa. Controlla la licenza sulla pagina di ogni famiglia prima di usarla.

Quanti font dovrebbe usare un sito web?

Di solito una o due famiglie. Una configurazione comune ne usa una per i titoli e una per il testo, oppure una sola famiglia con pesi diversi per entrambi. Ogni famiglia e ogni peso in più aggiungono file che il browser deve scaricare.

Che cos'è un font variabile?

Un font variabile è un unico file di font che contiene un intervallo continuo di stili lungo assi come peso, larghezza o dimensione ottica. Invece di caricare file separati per regular, medium e bold, carichi un solo file e puoi usare qualsiasi peso del suo intervallo.

Cosa sono i font web-safe?

Font già installati su quasi tutti i computer Windows e Mac, come Arial, Verdana, Georgia e Times New Roman, quindi non serve scaricarli. Non sono garantiti su tutti i telefoni o su ogni sistema Linux, perciò termina sempre uno stack di font con una famiglia generica come sans-serif.

Conviene fare self-hosting dei Google Fonts?

Puoi farlo, perché le licenze lo consentono. Il self-hosting elimina una connessione a un dominio di terze parti, ti dà il controllo sulla cache ed evita di inviare a Google gli indirizzi IP dei visitatori. Caricarli da Google Fonts è più semplice e gestisce i subset per te. In entrambi i casi usa WOFF2 e font-display: swap.

Testo del titolo

Il nome della tua azienda o il tuo titolo

Testo del paragrafo

Una frase dalla tua homepage

Testo del pulsante

Prenota ora

Dimensione del titolo: {n}px

Ripristina gli esempi

Inizia gratis · Nessuna carta di credito richiesta

Correlati: Guide

• Librerie di icone SVG gratuite a confronto
• Record BIMI
• Bing Places for Business
• Esempi di Bootstrap 5 con Equivalenti Tailwind
• API Key di Brave Search
• Web design brutalista
• Siti Aziendali con Blog
• Oggetti per Email di Lavoro che Vengono Aperte

Prodotto

• Creatore di siti web con IA
• Il builder IA da $2M installato nella tua azienda
• Enterprise
• Documentazione API

Per chi è

• Per le agenzie
• Per i freelance
• Per i provider di hosting
• Per le piattaforme SaaS
• Per le startup
• Servizi finanziari
• Soluzioni per la sanità

Funzionalità

• Editor con trascinamento
• SEO e analisi
• Branding personalizzato
• Dashboard cliente
• Fatturazione rivenditori

Risorse

• Blog
• Centro assistenza
• Strumenti gratuiti per le aziende
• Free UI Components
• Template
• Raccolte di template
• Esempi di siti
• Guide
• Confronti
• Alternative
• I migliori
• Recensioni
• Guide ai prezzi
• Glossario e guide
• Integrazioni
• Sviluppatori
• Benchmark
• Windows App

Azienda

• Chi siamo
• Prezzi
• Candidati al programma partner
• Contatti
• Lavora con noi
• Sicurezza
• Informativa sulla privacy
• Termini di servizio

Mappa del sito