Roboto nei titoli, Open Sans nel corpo del testo. La tipografia del sito sembra quella di metà delle installazioni WordPress. Il visitatore ha notato lo schema, riconosciuto il font, e il sito ha perso parte della sua personalità prima ancora del primo paragrafo.

Un font personalizzato si collega a WordPress in due modi: tramite un plugin in 2 minuti senza scrivere una riga di codice, oppure manualmente con @font-face avendo il pieno controllo sui file. Entrambi funzionano in modo affidabile, la scelta dipende dalla tua familiarità con i CSS.

Di seguito vediamo dove reperire i font, come configurare un plugin e come aggiungere @font-face in un child theme. Il codice è tratto da installazioni funzionanti: incollalo, sostituisci il nome del file e la tua tipografia è pronta.

💡 Panoramica rapida:

• Scarica un font da DaFont o FontSquirrel in formato WOFF2 o TTF: almeno tre varianti (regular, bold, italic).
• Installa Use Any Font o Fonts Plugin, carica il file dal pannello di amministrazione e assegna il font agli elementi. Nessun codice richiesto.
• Oppure collegalo manualmente: crea una cartella fonts nel child theme, carica i file via FTP e aggiungi @font-face nel style.css per ogni variante.
• Verifica la resa in più browser e non installare più di due font personalizzati: ogni file aumenta il peso della pagina.

Dove reperire i font e in quale formato

Google Fonts lo conoscono tutti, ed è proprio per questo che sono ovunque. Se cerchi qualcosa di meno abusato, ecco tre fonti affidabili.

DaFont offre oltre 3.500 font con categorie che vanno dal fumetto al vintage. La maggior parte è gratuita per uso personale. Per progetti commerciali, verifica la licenza di ogni singolo file: è indicata nella pagina del font.

FontSquirrel è specializzato in font gratuiti con licenza commerciale. La raccolta è contenuta, ma ogni font è stato verificato da legali. Il generatore integrato converte un file scaricato in WOFF e WOFF2 con un clic.

FontSpring vende font a pagamento, ma quasi ogni famiglia ha una o due varianti gratuite. Leggi attentamente la licenza prima di scaricare: varianti diverse possono avere condizioni diverse.

Regola generale: non inserire più di due font personalizzati in un sito. Uno per i titoli, un altro per il corpo del testo, è sufficiente. Ogni file aggiunge una richiesta HTTP e aumenta il peso della pagina di 30-100 KB.

Scarica tutte le varianti in una volta: regular, bold, italic e bold italic. Se il file ha una sola variante, il browser simulerà il grassetto e il corsivo con un ispessimento artificiale, e il risultato appare grossolano.

Metodo 1: plugin in 2 minuti

Un plugin, la strada più semplice. Si installa, si carica il file del font, si sceglie dove applicarlo. Niente codice, niente connessioni FTP.

Use Any Font

🔗 Use Any Font su WordPress.org

🔗 Screenshot e demo

Carica font in formato TTF, OTF e WOFF, li converte automaticamente in WOFF2 con compressione Brotli. Secondo la pagina del plugin su WordPress.org, la velocità di caricamento migliora di circa il 30%. I font sono archiviati sul tuo server: conformità GDPR garantita in partenza, nessuna dipendenza da API esterne dopo la conversione.

Dopo l'installazione ottieni una chiave API (la chiave gratuita Lite consente una conversione), carichi il file e assegni il font tramite l'interfaccia visiva. Puoi applicarlo a titoli, paragrafi o blocchi specifici direttamente dal pannello di amministrazione.

Supporta l'integrazione con Elementor, Divi, WPBakery, Gutenberg: assegni il font una volta nel plugin e questo compare nell'elenco font del builder.

Nota: per più font serve una chiave Premium. Per un sito tipico la versione gratuita è sufficiente: un font brand per i titoli, Google Fonts per il testo.

Fonts Plugin

🔗 Fonts Plugin su WordPress.org

🔗 Screenshot del plugin

Ex Olympus Google Fonts: nome cambiato, funzionalità ampliate. Secondo la pagina del plugin, conta oltre 200.000 installazioni attive e una valutazione a 5 stelle da più di 1.200 utenti. Supporta Google Fonts, Adobe Fonts (Typekit) e il caricamento di file personalizzati.

La configurazione avviene tramite il personalizzatore: selezioni un font, vedi un'anteprima dal vivo, salvi.

La versione Pro aggiunge l'hosting locale dei Google Fonts per la GDPR, il caricamento selettivo dei soli spessori necessari e il controllo di dimensione, colore, interlinea. La versione gratuita è sufficiente per la maggior parte dei siti.

Plugin o manuale: quando scegliere cosa

Un plugin vince in velocità: installazione in 2 minuti, nessun codice richiesto. Ma dipendi dagli aggiornamenti del plugin e dalla sua compatibilità con la versione di WordPress.

L'installazione manuale tramite @font-face è più complessa da configurare, ma controlli ogni byte. Nessuna API di terze parti, nessun aggiornamento che ti rompa la tipografia.

Se lavori già con un child theme, il metodo manuale si integrerà in modo organico nel tuo CSS. I font diventano parte del tema e resteranno lì per anni.

Metodo 2: installazione manuale tramite @font-face

La direttiva @font-face collega i file dei font direttamente dal tuo server. I formati supportati sono TTF, OTF, WOFF, WOFF2 e SVG. Ogni peso richiede un blocco di codice separato.

Ma dopo la configurazione ti dimentichi della tipografia per anni: gli aggiornamenti di WordPress e del tema non toccheranno i font, che risiedono nel tuo child theme e vengono caricati ogni volta come parte del CSS.

Prima di iniziare, crea un child theme: tutte le modifiche vanno al suo interno, il tema padre resta intatto e si aggiornerà senza perdere le tue personalizzazioni.

Step 1: crea una cartella per i font

Nella cartella del child theme, crea una directory fonts. Aggiungila via FTP o dal file manager dell'hosting:

1
wp-content/themes/your-child-theme/fonts/

Se il tuo child theme si chiama twentytwentyfour-child, il percorso sarà wp-content/themes/twentytwentyfour-child/fonts/.

Step 2: carica i file dei font sul server

Copia i file scaricati nella cartella fonts via FTP o dal file manager dell'hosting. Per ogni peso, un file separato:

1
fonts/WebFont.woff2
2
fonts/WebFont.woff
3
fonts/WebFont-Bold.woff2
4
fonts/WebFont-Bold.woff
5
fonts/WebFont-Italic.woff2
6
fonts/WebFont-Italic.woff

In pratica, i formati WOFF e WOFF2 sono sufficienti: coprono tutti i browser moderni e pesano meno del TTF. Secondo MDN Web Docs, WOFF2 comprime un font in modo più efficiente del 30% rispetto a WOFF ed è supportato da tutti i browser dal 2016.

Il browser sceglierà il formato appropriato tra quelli collegati: se supporta WOFF2, caricherà quello, altrimenti prenderà WOFF.

Step 3: aggiungi @font-face nel style.css

Apri il style.css del child theme e aggiungi il codice dopo l'intestazione del tema (il commento con nome e descrizione del tema). Inizia con il peso regular:

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

font-family, il nome del font che userai nel CSS. Nominalo in modo da non confonderlo con i font di sistema: non Arial, ma MyBrandSans o BrandHeading. src, percorso dei file relativo al style.css. L'ordine conta: prima WOFF2 (più leggero), poi WOFF (fallback per browser più vecchi).

Step 4: aggiungi il corsivo

1
@font-face {
2
    font-family: 'MyWebFont';
3
    src: url('fonts/WebFont-Italic.woff2') format('woff2'),
4
         url('fonts/WebFont-Italic.woff') format('woff');
5
    font-weight: normal;
6
    font-style: italic;
7
}

Nota: font-family è la stessa, font-weight resta normal, e font-style cambia in italic. Il browser sostituirà il file giusto per il tag em e la proprietà font-style: italic.

Step 5: aggiungi il peso bold

1
@font-face {
2
    font-family: 'MyWebFont';
3
    src: url('fonts/WebFont-Bold.woff2') format('woff2'),
4
         url('fonts/WebFont-Bold.woff') format('woff');
5
    font-weight: bold;
6
    font-style: normal;
7
}

Qui font-style è di nuovo normal, e font-weight ora è bold. Ora il tag strong e la proprietà font-weight: bold verranno renderizzati con il tuo file bold, non con l'ispessimento simulato dal browser. La differenza è percepibile: il vero peso bold è bilanciato dal font designer, la simulazione appare grezza.

Step 6: bold italic (opzionale)

1
@font-face {
2
    font-family: 'MyWebFont';
3
    src: url('fonts/WebFont-BoldItalic.woff2') format('woff2'),
4
         url('fonts/WebFont-BoldItalic.woff') format('woff');
5
    font-weight: bold;
6
    font-style: italic;
7
}

Quattro pesi coprono praticamente tutte le esigenze tipografiche di un sito standard. Se il design non richiede il bold italic, salta questo step: il file non verrà caricato finché il CSS non richiederà esplicitamente la combinazione bold + italic.

Step 7: applica il font agli elementi

Dopo @font-face aggiungi le regole che assegnano il font a elementi specifici. Aggiungi al style.css del child theme:

1
body {
2
    font-family: 'MyWebFont', Arial, sans-serif;
3
}
4
 
5
h1, h2, h3 {
6
    font-family: 'MyWebFont', Georgia, serif;
7
}

La prima regola: il tuo font per il corpo del testo, con fallback al font di sistema Arial. La seconda: lo stesso font per i titoli, con fallback a Georgia.

Se il file del font non viene caricato (il server non risponde o il percorso è sbagliato), il sito non resterà senza testo: il browser mostrerà Arial o Georgia. Un fallback è obbligatorio: senza, il browser userà il font di default del sistema, di solito Times New Roman, e la tipografia andrà in pezzi.

Fatto. Un font personalizzato è connesso senza plugin e servizi esterni. La tipografia risiede sul tuo server e non si romperà se un'API di terze parti cambia condizioni o va offline.

Video: configurazione passo passo su un sito live

Guarda come si presenta l'intero processo su un sito WordPress reale, dalla scelta del font all'applicazione ai titoli:

Il video mostra entrambi i metodi: via plugin e via @font-face. È comodo mettere in pausa e seguire i passaggi. Il video è in inglese, ma il procedimento è visivamente chiaro anche senza audio.

⁉️🤔 Domande frequenti

Quanti font personalizzati posso aggiungere a un sito?

Non più di due: uno per i titoli, un altro per il corpo del testo. Ogni font comporta diversi file di peso, da 30 a 100 KB ciascuno. Due font aggiungeranno un volume percepibile al caricamento della pagina. Un terzo peggiorerà sensibilmente la velocità, specie su connessioni mobili lente.

È obbligatorio creare un child theme per @font-face?

Formalmente no: puoi inserire @font-face direttamente nel style.css del tema principale. Ma al prossimo aggiornamento del tema tutte le modifiche andranno perse. Un child theme risolve il problema una volta per tutte. Se non ne hai ancora creato uno, la nostra guida al child theme per WordPress ti accompagna dall'installazione al primo risultato.

Quale formato di file scegliere: WOFF, WOFF2 o TTF?

WOFF2, come priorità. Comprime un font sensibilmente più di WOFF ed è supportato da tutti i browser moderni. WOFF, come riserva per versioni browser più vecchie. Collega TTF e OTF solo se il font non è disponibile nei formati web: non sono compressi e pesano il doppio. L'ordine in src è sempre: WOFF2, poi WOFF.

Perché il font non viene visualizzato dopo l'installazione?

Tre cause comuni. Prima: il percorso del file in url() è sbagliato, verifica che il percorso sia costruito a partire da style.css, non dalla root del sito. Seconda: la cache del browser trattiene il vecchio CSS, apri il sito in incognito o svuota la cache con Ctrl+F5. Terza: conflitto con un tema che sovrascrive font-family con priorità più alta, controlla nell'inspector quale selettore CSS viene effettivamente applicato al testo.

È necessario specificare format() in src?

Formalmente il browser determina il formato da solo dalle intestazioni del file. Ma un format('woff2') esplicito accelera la selezione: il browser non scarica un file che sicuramente non supporta. Perciò specificalo sempre. È una raccomandazione della specifica CSS Fonts Level 4.

Come verifico che il font venga caricato dal mio server e non esternamente?

Apri DevTools (F12), scheda Network, filtro Font, aggiorna la pagina. L'elenco deve contenere solo file dal tuo dominio. Se vedi fonts.googleapis.com o fonts.gstatic.com, i Google Fonts vengono caricati esternamente. Per la conformità GDPR, spostali in hosting locale tramite Fonts Plugin Pro oppure scaricali manualmente e collegali via @font-face.

Quale metodo di collegamento dei font scegliere?

Entrambi i metodi funzionano in modo affidabile. La scelta dipende da cosa è più importante per te: velocità di configurazione o controllo su ogni byte.

Se installi un font per la prima volta e non vuoi toccare codice, scegli Use Any Font. Caricato il file, assegnato ai titoli, fatto. La versione gratuita basta per un font proprietario sui titoli.

Se ti serve accesso al catalogo Google Fonts con anteprima live direttamente nel customizer, scegli Fonts Plugin. La versione gratuita basta per la maggior parte delle esigenze, la Pro serve solo per l'hosting locale dei Google Fonts in ottica GDPR.

Se lavori già con un child theme e sei abituato a modificare i CSS manualmente, scegli @font-face. Zero dipendenze esterne, controllo totale, e dopo la configurazione non pensi più alla tipografia per anni. Gli aggiornamenti del tema non toccheranno i font, che risiedono nel tuo child theme come parte del CSS.

Inizia con un plugin: sono 2 minuti e nessun rischio. Che font hai ora sul sito, il default del tema o ne hai già collegato uno tuo?