Skip to content

Tutto per WordPress, lo sviluppo web — e non solo

🔤 Font personalizzati per un sito WordPress: una guida passo passo 2026

🔤 Font personalizzati per un sito WordPress: una guida passo passo 2026

Il font predefinito tradisce un sito WordPress al primo sguardo. Un carattere di sistema urla «non ho configurato nulla» più forte di qualsiasi template gratuito.

Cambiare il font richiede dieci minuti. Non serve essere uno sviluppatore front-end e non serve pagare. I cinque metodi qui sotto coprono tutto: dai principianti che hanno paura di toccare il codice ai proprietari di sito che vogliono il controllo totale.

Abbiamo raccolto i metodi funzionanti al 2026. Dall'approccio peggiore ancora consigliato in guide obsolete fino al metodo canonico, «il modo WordPress».

💡 Panoramica rapida:

  • Scegli un font: Google Fonts (gratuito, oltre 1500 caratteri), Adobe Fonts (abbonamento Creative Cloud) oppure carica i tuoi WOFF2 sul server.
  • Decidi se ti serve un plugin (più semplice, interfaccia nel personalizzatore) o il collegamento manuale via functions.php (più pulito, più veloce, nessuna dipendenza da codice di terze parti).
  • Per il metodo manuale: aggiungi wp_enqueue_style in functions.php e font-family nel CSS.
  • Per il metodo con plugin: installa EasyFonts o Use Any Font, seleziona un carattere e salva.
  • Testa il risultato su browser diversi e su mobile: ogni font aggiuntivo aggiunge da 50 a 200 KB al caricamento della pagina.

Perché cambiare i font del sito

I font plasmano la prima impressione più velocemente dei colori o delle immagini. Già nel 2008 i ricercatori dell'Università del Michigan hanno dimostrato che un testo composto con un font complesso viene percepito inconsciamente come «difficile». I lettori sono meno propensi a seguire le istruzioni e sovrastimano il tempo necessario per completare un'attività.

Anche la scelta tra serif e sans-serif conta. I caratteri serif (Georgia, Merriweather) aumentano il tempo di lettura ma rafforzano l'autorevolezza percepita. I sans-serif (Roboto, Inter) accelerano la lettura e funzionano meglio sugli schermi mobile. Non sono supposizioni: una rassegna delle ricerche sulla psicologia della tipografia conferma l'effetto nella pratica.

Per un sito WordPress, il font giusto risolve tre problemi:

  • Riconoscibilità del brand. Un font distintivo per i titoli evita che il sito sembri «l'ennesimo blog su un tema standard».
  • Leggibilità. Dimensione, interlinea e contrasto corretti riducono la frequenza di rimbalzo.
  • Gerarchia visiva. Caratteri diversi per titoli e corpo testo guidano l'occhio del visitatore.

Ora passiamo alla pratica.

Dove trovare i font per WordPress

Ci sono tre fonti: Google Fonts, Adobe Fonts e l'hosting in proprio. Esaminiamole una per una.

Google Fonts: gratuito e senza registrazione

La fonte più ovvia. Oltre 1500 font, licenza aperta, caching tramite CDN di Google. Adatto al 95% dei siti.

Vai su fonts.google.com. L'interfaccia ti accoglie con una griglia di schede che mostrano un campione di ciascun font.

Homepage di Google Fonts con griglia di font

I filtri sono sulla sinistra. Puoi filtrare per categoria (Serif, Sans Serif, Display, Handwriting, Monospace), lingua, numero di stili e spessore. I filtri si applicano all'istante e i risultati si aggiornano senza ricaricare la pagina.

Passa il mouse su un font per vedere un menu che permette di cambiare il testo di esempio. Inserisci il tuo titolo o paragrafo e verifica l'effetto.

Anteprima del font al passaggio del mouse in Google Fonts

Clicca su «View specimen» per aprire la pagina del font con tutti gli stili, la tabella dei glifi e i campioni a diverse dimensioni.

Pagina dettaglio font in Google Fonts con tutti gli stili

Se un font ti piace, clicca sul segno più rosso nell'angolo della scheda. Il font finisce nel pannello di raccolta in fondo allo schermo. Puoi aggiungere più famiglie: una per i titoli, un'altra per il corpo del testo.

Pannello raccolta con font selezionati in Google Fonts

Espandi il pannello di raccolta per vedere le schede «Embed» e «Customize».

Scheda Incorpora con codice per aggiungere font a un sito

Nella scheda «Customize», seleziona gli stili che ti servono. Importante: non selezionare tutto. Ogni stile è un file aggiuntivo che il browser deve caricare. Per un sito tipico bastano Regular (400) e Bold (700), a volte l'Italic. L'indicatore di velocità nell'angolo in alto a destra mostra quanto il font rallenterà il caricamento.

Scheda Personalizza per selezionare gli stili del font in Google Fonts

Se il tuo sito utilizza un alfabeto non latino, seleziona il set di caratteri appropriato in fondo alla pagina. Per il cirillico, è Cyrillic.

Selezione set caratteri linguistici per un font in Google Fonts

Due pulsanti con freccia in alto: quello a sinistra condivide la raccolta, quello a destra scarica i file dei font sul tuo computer. Utile per Photoshop o se decidi di ospitare il font in autonomia.

Pulsanti Condividi raccolta e Scarica font in Google Fonts

Adobe Fonts (ex Typekit)

Se hai un abbonamento Creative Cloud, Adobe Fonts dà accesso a caratteri tipografici professionali come Futura, Minion Pro e Myriad. I font si collegano tramite CSS, in modo simile a Google Fonts. Il piano gratuito di Creative Cloud include un set base, sufficiente per la maggior parte dei progetti.

Font personalizzati in WOFF2

Hai acquistato un font con licenza o ne hai scaricato uno gratuito da Font Squirrel? Convertilo in WOFF2 (formato moderno per font web, compressione Brotli, supportato dal 97% dei browser) e caricalo sul tuo server. Vantaggio: nessuna dipendenza da CDN di terze parti e conforme al GDPR. Svantaggio: il font viene caricato dal tuo server, che è inevitabilmente più lento del CDN di Google.

5 Modi per aggiungere font personalizzati a WordPress

Ci sono esattamente cinque modi. Andiamo da "non fatelo" al metodo ideale per WordPress.

Metodo 1: CSS @import (non fatelo)

Google Fonts offre una scheda @import con una stringa CSS già pronta. Sembra comodo: copia, incolla, fatto.

Scheda Importa in Google Fonts con codice CSS pronto

Tecnicamente, il codice va all'inizio del file style.css del vostro tema child:

1/*
2 Theme Name: Twenty Seventeen Child
3 Theme URI: https://wordpress.org/themes/twentyseventeen/
4 Template: twentyseventeen
5 Author: the WordPress team
6 Author URI: https://wordpress.org/
7 Version: 1.0
8*/
9
10@import url('https://fonts.googleapis.com/css?family=Open+Sans|Roboto');
11
12/* additional CSS goes here */

Perché è l'opzione peggiore? @import impedisce al browser di caricare più fogli di stile in parallelo. Il browser scarica il file CSS, vede l'@import al suo interno e solo a quel punto recupera il font. Caricamento sequenziale invece che parallelo significa 200-400 ms persi per ogni font. Su mobile, questo è critico.

Non usate @import per i font. Mai.

Le librerie di font forniscono un tag <link> da inserire nel <head>. Potete inserirlo direttamente in header.php, il file template che ogni tema WordPress possiede.

Modifica del file header.php del tema WordPress per inserire i font

Inserite il <link> tra i tag <head> e </head>. Se lavorate con un tema child, copiate header.php dal tema padre al tema child e modificatelo lì.

Questo metodo funziona ma è fragile: gli aggiornamenti del tema sovrascriveranno le vostre modifiche se non usate un tema child. Inoltre, mischiare contenuto e codice nei template è una cattiva pratica. Va bene per un esperimento una tantum, non per un uso permanente.

Metodo 3: @font-face e self-hosting dei font

Se il font è sul vostro server, dovete dichiararlo usando la direttiva @font-face nel vostro foglio di stile. Per prima cosa, caricate i file del font (WOFF2, WOFF) via FTP nella cartella del vostro tema child, per esempio wp-content/themes/yourtheme-child/fonts/.

Poi aggiungete al style.css:

1@font-face {
2 font-family: 'Roboto';
3 src: url('fonts/Roboto-Regular.woff2') format('woff2'),
4 url('fonts/Roboto-Regular.woff') format('woff');
5 font-weight: normal;
6 font-style: normal;
7 font-display: swap;
8}

Il parametro font-display: swap è importante: dice al browser di mostrare prima il testo con un font di sistema e poi di sostituirlo con il font personalizzato una volta caricato. Senza, i visitatori vedono una schermata bianca mentre il font si carica.

Non dimenticate di sostituire il nome e il percorso del font. Se il vostro file sorgente è TTF o OTF, convertitelo in WOFF2 usando il convertitore online Font Squirrel.

Questo metodo dà il pieno controllo ma perde in velocità rispetto a Google Fonts: il vostro server è quasi certamente più lento della CDN di Google. Per siti fino a 10.000 visitatori al mese, la differenza è impercettibile. Per progetti ad alto traffico, è critica.

Metodo 4: functions.php e wp_enqueue_style (il metodo canonico WordPress)

Il metodo più corretto dal punto di vista dell'architettura di WordPress. Invece di inserire codice in un template, si "accoda" il foglio di stile con il font tramite l'hook wp_enqueue_scripts.

Il codice va nel file functions.php del tema attivo o del tema child. Ecco un esempio funzionante per Google Fonts:

1function techblog_add_google_fonts() {
2 wp_enqueue_style(
3 'techblog-google-fonts',
4 'https://fonts.googleapis.com/css2?family=Inter:wght@400;700&family=Playfair+Display:wght@700&display=swap',
5 array(),
6 null
7 );
8}
9add_action( 'wp_enqueue_scripts', 'techblog_add_google_fonts' );

La funzione wp_enqueue_style accetta quattro parametri: un nome univoco (handle), l'URL del foglio di stile, un array di dipendenze (qui vuoto) e la versione (null, WordPress la sostituirà con la propria). L'hook wp_enqueue_scripts assicura che il codice venga eseguito al momento giusto durante il caricamento della pagina.

Per i font Adobe, in passato si usavano JavaScript e wp_enqueue_script. Ora Adobe Fonts è passato a un approccio CSS simile a Google Fonts, quindi wp_enqueue_style copre entrambi i servizi.

Perché questo è il miglior metodo manuale:

  • I font non verranno sovrascritti durante gli aggiornamenti del tema (se siete in un tema child).
  • WordPress gestisce l'ordine di caricamento e risolve le dipendenze.
  • Il codice è isolato in functions.php, i template restano puliti.
  • Altri plugin possono disabilitare o modificare la vostra chiamata tramite hook standard.

Metodo 5: plugin (se non volete toccare il codice)

Non siete pronti a mettere mano a functions.php? Un plugin risolve il problema senza una sola riga di codice.

Easy Google Fonts (esempio visivo, ma non per siti in produzione)

Il plugin di font più vecchio nella directory di WordPress. Offre un'interfaccia nel personalizzatore: selezionate un font, vedete le modifiche in tempo reale, salvate.

L'installazione è standard: Plugin → Aggiungi nuovo → cercate "Easy Google Fonts" → InstallaAttiva.

Opzione tipografia nel personalizzatore di WordPress dopo aver installato Easy Google Fonts

Dopo l'attivazione, una nuova voce "Tipografia" appare in Aspetto → Personalizza. Entrateci, selezionate Tipografia predefinita e vedrete i controlli per i font di paragrafi e intestazioni.

Controlli font nel plugin Easy Google Fonts

Cliccate sul menu a tendina accanto all'elemento che volete modificare. Si espande un menu:

Menu a tendina selezione font nel plugin Easy Google Fonts

L'opzione più importante è Font Family. Qui hai accesso all'intera libreria di Google Fonts (oltre 600 caratteri tipografici). I font sono raggruppati per categoria: serif, sans-serif, Display, Handwriting, Monospace. Puoi cercare per nome.

Clicca su un font e le modifiche sono immediatamente visibili nell'anteprima a destra.

Anteprima in tempo reale del font selezionato nel personalizzatore

Poi si passa alla messa a punto. La scheda Font Weight/Style controlla lo spessore. Text Decoration aggiunge sottolineatura, barrato o sopralineatura. Text Transform cambia il maiuscolo/minuscolo: tutto maiuscolo, minuscolo o iniziali maiuscole.

Nella scheda Appearance: colore del font, colore di sfondo, dimensione, interlinea e spaziatura tra le lettere.

Impostazioni aspetto testo nel plugin Easy Google Fonts

La scheda Positioning: margini, padding, bordi, raggio del bordo e la proprietà display.

Impostazioni posizionamento font nel plugin Easy Google Fonts

Quando hai finito, clicca su Save and Publish in alto.

Un avviso onesto: Easy Google Fonts non viene aggiornato dal 2020. Su WordPress 6.4+, il plugin potrebbe non funzionare. Alcuni utenti segnalano che l'opzione «Typography» non compare nel personalizzatore. Lo mostriamo come esempio dell'approccio: la maggior parte dei plugin per font funziona con lo stesso meccanismo del personalizzatore.

Cosa fare se il font non cambia

Alcuni temi usano selettori CSS non standard. Un'intestazione potrebbe non essere semplicemente <h1> ma <h1 class="entry-title">, e il plugin «non vede» quell'elemento.

Soluzione: crea un controllo font personalizzato in Impostazioni → Google Fonts.

Creazione di un controllo font personalizzato nelle impostazioni di Easy Google Fonts

Associa il selettore CSS richiesto al nuovo controllo e attiva l'override forzato. Dopo il salvataggio, il controllo apparirà nel personalizzatore insieme a quelli standard.

Plugin alternativi (aggiornati al 2026)

Easy Google Fonts non è l'unica opzione. Tre alternative attive:

  • EasyFonts ospita i Google Fonts in locale sul tuo server. Rileva automaticamente i font in uso, li scarica e li serve dal tuo dominio. Più veloce delle richieste CDN standard, oltre che pienamente conforme al GDPR. Il più leggero dei tre in termini di impatto sulle performance.
  • Use Any Font ti permette di caricare i tuoi font senza scrivere CSS. Il plugin converte TTF/OTF/WOFF in formato web e li ospita sul tuo server. Adatto per font commerciali acquistati su licenza.
  • Fonts Plugin è un gestore alternativo di Google Fonts con anteprima nel personalizzatore. A differenza del datato Easy Google Fonts, viene aggiornato regolarmente e testato con le versioni correnti di WordPress.

Applicare il font agli elementi del sito

Il font è collegato ma ancora «sospeso nel vuoto». Devi indicare al browser a quali elementi applicarlo.

Ecco il CSS di base per sostituire il font delle intestazioni. Aggiungilo via Aspetto → Personalizza → CSS aggiuntivo:

1h1,
2h2,
3h3,
4h4,
5h5,
6h6 {
7 font-family: 'Roboto', sans-serif;
8}

Per il corpo del testo:

1body,
2p,
3li {
4 font-family: 'Inter', sans-serif;
5}

Una sfumatura importante: il nome del font in font-family deve corrispondere esattamente a come lo dichiara la libreria. Google Fonts usa 'Roboto', mentre Adobe Fonts potrebbe restituire 'open-sans' (senza spazio e senza virgolette). Controlla con attenzione il codice fornito dal servizio, non il nome del font mostrato sul sito.

Puoi aggiungere questo CSS in tre modi: tramite il personalizzatore (il più semplice, sopravvive agli aggiornamenti del tema), tramite il style.css del child theme, oppure tramite l'hook wp_head. Consigliamo il primo.

⁉️🤔 Domande frequenti

Quanti font si possono aggiungere a un sito senza perdere velocità?

In modo ottimale, due famiglie: una per i titoli, una per il corpo del testo. Ogni font aggiuntivo comporta una richiesta HTTP e 50-200 KB di peso della pagina. Tre font sono già il limite massimo. E collega solo gli stili che ti servono: Regular (400) e Bold (700) pesano la metà di un set da 5-6 stili.

Google Fonts o Adobe Fonts: quale scegliere?

Per 9 siti su 10, Google Fonts. Gratuito, veloce (CDN di Google), oltre 1500 font, il cirillico è disponibile in quasi tutti i caratteri più diffusi. Adobe Fonts ha senso se hai già un abbonamento Creative Cloud e ti serve un font commerciale specifico come Futura o Minion Pro.

Si può usare un file TTF scaricato dal proprio computer?

Si può, ma prima convertilo in WOFF2 (formato compresso moderno per il web). I file TTF non sono compressi e occupano molto più spazio. WOFF2 con compressione Brotli riduce la dimensione del file di diverse volte. Convertitore: Font Squirrel Webfont Generator.

Plugin o functions.php: quale metodo è più affidabile?

functions.php è più affidabile per un uso a lungo termine: nessuna dipendenza aggiuntiva, il codice è trasparente, gli aggiornamenti dei plugin non ti influenzano. I plugin vincono per comodità: 5 minuti contro mezz'ora per imparare gli hook. Per un sito in produzione, scegli wp_enqueue_style in un child theme. Per un prototipo veloce o un sito cliente che necessita di un'interfaccia semplice, usa un plugin.

Perché il font appare diverso su mobile rispetto al desktop?

I browser mobile a volte sostituiscono i font di sistema o applicano un antialiasing diverso. Inoltre le dimensioni dello schermo sono diverse: 16px su desktop si legge bene, ma su un telefono potrebbe essere troppo grande. Soluzione: imposta una dimensione relativa usando clamp() (ad esempio font-size: clamp(16px, 2.5vw, 20px)) e testa su un dispositivo reale, non su un emulatore.

Riepilogo finale: cosa usare sul tuo sito nel 2026

Riassumendo tutto in cinque frasi:

  • Google Fonts è la fonte di font predefinita. Sufficiente per il 95% dei progetti: veloce, gratuito, il cirillico è disponibile ovunque.
  • functions.php + wp_enqueue_style è il miglior metodo manuale. Pulito, sopravvive agli aggiornamenti del tema, il codice è trasparente.
  • Il plugin EasyFonts funziona se vuoi l'hosting locale dei Google Fonts senza lo sbattimento del codice. Più veloce del CDN standard e conforme al GDPR.
  • Due stili per font, non di più: Regular e Bold. Ogni stile extra ruba 30-50 KB di caricamento.
  • WOFF2, non TTF: converti prima di caricare sul tuo server. Risparmia mezzo megabyte a pagina.

Cambiare i font è una di quelle attività in cui un'ora di configurazione accurata produce anni di resa visiva. Inizia subito: vai sul sito di Google Fonts, trova un paio di caratteri per il tuo progetto e prova il metodo 4 dell'elenco sopra.