Come impiegare font variabili nei temi WordPress

Novembre 18, 2025 Monacodesign

Indice dei Contenuti

Come impiegare font variabili nei temi WordPress

Negli ultimi anni la tipografia web ha fatto passi da gigante. Con l’avvento dei web font (a partire dal 2009), i designer hanno iniziato a usare file tipografici personalizzati, grazie alla regola CSS @font-face, liberandosi così dai font di sistema tradizionali.

In origine, però, usare i font sul web significava gestire file separati per ogni variante: peso normale, grassetto, corsivo, e così via. Ogni versione era un file distinto (es. “Roboto-Italic.woff2”, “Lato-BoldItalic.woff2”), il che aumentava il numero di richieste HTTP e appesantiva la pagina.

L’evoluzione tipografica: i font variabili

Dal 2016 è entrata in scena una rivoluzione per la tipografia digitale: i font variabili. Creati da grandi player come Google, Apple, Adobe e Microsoft, questi font supportano degli “assi” di variazione (come peso, stile, inclinazione, larghezza, dimensioni ottiche), permettendo di avere moltissime varianti in un singolo file. Kinsta+1

Il formato più usato è .woff2, molto compresso e largamente supportato nei browser moderni. Kinsta+1
Anche formati come .ttf e .otf funzionano, ma con .woff2 si ottiene il bilancio migliore tra compattezza e compatibilità. Kinsta

Perché conviene usare font variabili

I vantaggi sono molti:

Performance migliorate
Un solo file può includere tutte le varianti (regolare, grassetto, corsivo, ecc.). Ciò significa meno richieste e un caricamento più rapido. Kinsta
Maggiore flessibilità di design
Si può modulare il peso del font in modo molto più preciso: ad esempio, non solo “500” o “600”, ma un valore intermedio come “532”. Kinsta
Tipografia responsiva
I font variabili consentono di realizzare testi che si adattano fluidamente alle dimensioni dello schermo. Ad esempio, usando font-weight: clamp(), è possibile far variare il peso in base al viewport senza passaggi bruschi. Kinsta

L’integrazione con WordPress

Con WordPress 6.1 (novembre 2022), è arrivato il supporto nativo ai font variabili tramite il file theme.json. Kinsta Il tema Twenty Twenty-Three è il primo esempio concreto di questa funzionalità.

Aggiungere font variabili in un tema child

Caricamento degli stili
Nel tema child, si possono aggiungere i propri file di font variabili dichiarandoli in fonts.css con @font-face. Poi, nel functions.php, si richiamano gli stili del tema genitore, del child theme e il file dei font.
Definizione in theme.json
Si inserisce una sezione “typography” in theme.json, dove si dichiarano le famiglie di font. Ad esempio, si possono aggiungere Manrope e Fira Code (già variabili) e introdurre anche un font come Vollkorn per le intestazioni, specificando gli assi (“weight”, “style”, ecc.) e dove si trovano i file .woff2. Kinsta

Caricare i font correttamente

Nel file CSS del child theme (styles.css) si definiscono le family di font per il body, le intestazioni e altri elementi. Kinsta
In fonts.css si dichiarano le regole @font-face: per ogni font variabile, si specifica la sorgente (es. il percorso al file .woff2), il range di peso (es. da 100 a 900), lo stile (“normal” o “italic”) e si imposta font-display: swap per migliorare le prestazioni. Kinsta
Se il font è particolarmente critico (ad esempio per le intestazioni), può essere precaricato con un elemento <link rel="preload"> nell’<head> del sito. Kinsta

Offrire più scelte di peso all’utente

Uno dei limiti iniziali di WordPress è che non offre un’interfaccia per scegliere pesi “non standard” di font variabili. Per aggirare questo problema, si può usare un plugin minimale (es. “Font Weight Options”) che aggiunge una pagina nelle impostazioni di Aspetto. In questa pagina è possibile impostare valori personalizzati per il peso (tra 100 e 900), scegliendoli per il testo, le intestazioni e anche per i blocchi di codice. Kinsta
In questo modo, gli utenti del sito possono definire pesi su misura, anche non convenzionali, e vederli applicati sia nell’editor che nel frontend. Kinsta

Alternative più semplici

Se ti sembra troppo complesso implementare tutto da zero, esiste una soluzione più leggera:

Usa Google Fonts: molti dei font di Google sono variabili. Basta integrarli tramite la libreria di font.
Se vuoi usare font open source, puoi cercarli su GitHub (per esempio, Adobe ha un font variabile chiamato Source Sans 3 Variable).
Nel tema child, potresti semplicemente caricare un file .woff2 variabile nella cartella /assets/fonts/ e dichiararlo via @font-face come visto sopra.

I font variabili rappresentano oggi una delle soluzioni tipografiche più efficaci per migliorare performance, usabilità e coerenza grafica di un sito WordPress. Grazie a un unico file che racchiude centinaia di varianti, permettono di ridurre le richieste al server, aumentare la velocità di caricamento delle pagine e ottenere un design più flessibile e professionale.

Implementarli correttamente tramite @font-face, file .woff2 e configurazioni dedicate nel theme.json consente di ottenere un sito più ottimizzato, più responsive e con una struttura tipografica moderna, capace di migliorare anche la SEO on-site grazie ai tempi di caricamento ridotti e a un layout più leggibile.

Se desideri ottimizzare il tuo sito WordPress, migliorare la SEO, aggiornare il design tipografico o creare da zero un progetto web professionale, posso aiutarti:
offro consulenza marketing, supporto completo per lo sviluppo di siti web WordPress e strategie per migliorare visibilità e conversioni online.

📩 Contattami quando vuoi per una consulenza personalizzata o per valutare insieme il tuo progetto. Sarò felice di accompagnarti nella crescita del tuo business.

Articoli correlati:

Come creare un blog di cucina gratis e iniziare a guadagnare

Come creare un blog di viaggi e guadagnare facendo il Travel blogger

Come creare un blog gratis su internet