Quando esegui un sito attraverso PageSpeed Insights, una delle diagnosi più comuni è "Assicurati che il testo rimanga visibile durante il caricamento dei webfont". Il problema è familiare a chiunque abbia installato Elementor, Astra o collegato Google Fonts: mentre il browser scarica il file del font, il testo sulla pagina è semplicemente assente. Uno schermo bianco al posto di un titolo, frazioni di secondo di vuoto e il visitatore se n'è già andato.

Tecnicamente, questo fenomeno si chiama FOIT (Flash of Invisible Text). La radice del problema sta nella direttiva font-display che il browser utilizza per impostazione predefinita. Senza specificare esplicitamente font-display: swap, il browser attende il caricamento del font e non mostra il testo finché il file non viene ricevuto. E se il font viene caricato da una CDN attraverso un dominio di terze parti, il ritardo si accumula e PageSpeed Insights segnala un avviso.

La soluzione passa per due aspetti: primo, ogni @font-face deve avere font-display: swap, così il browser mostra immediatamente il testo con un font di sistema e lo "scambia" con quello personalizzato quando si carica. Secondo, i font di importanza critica (quello usato per il titolo nella prima schermata) vanno precaricati tramite <link rel="preload">. Di seguito trovi una guida passo passo su come fare in WordPress, tenendo conto di plugin come Elementor e temi come Astra.

💡 Panoramica rapida:

• Apri il report di PageSpeed Insights e prendi nota dei font problematici dalla sezione diagnostica
• Disattiva gli stili di plugin e tema tramite wp_dequeue_style in functions.php
• Copia i file dei font in una cartella locale e ricrea font-face con font-display: swap
• Aggiungi il preload per uno o due font della prima schermata
• Per i font personalizzati di Elementor, cambia il percorso in locale e rigenera i CSS

Step 1: trova i font problematici nel report

Esegui un audit su PageSpeed Insights, attendi il risultato e trova la sezione diagnostica. Cerchiamo la voce "Assicurati che il testo rimanga visibile durante il caricamento dei webfont".

Espandi l'elenco per vedere gli URL specifici dei font che non hanno font-display: swap. Di solito si tratta di:

• fontawesome-webfont.woff2, Font Awesome di Elementor;
• eicons.woff2, font di icone di Elementor;
• Google Fonts (Open Sans, Roboto, Montserrat), se il tema li richiama via CDN.

Annota i nomi dei file; serviranno per i passaggi successivi. La cosa principale ora è capire quale plugin o tema è responsabile di ciascun font. Font Awesome ed eicons provengono da Elementor. I Google Fonts sono spesso collegati dal tema; in Astra, si tratta dell'hook astra-google-fonts.

Step 2: disattiva gli stili che caricano i font

Ora il compito è rimuovere il collegamento standard di questi font per poi ripristinarli con le impostazioni corrette. Vai nel functions.php del tema child (o in un plugin per codice come Code Snippets) e aggiungi:

1
/**
2
 * Disable styles that load problematic fonts
3
 */
4
function sdstudio_dequeue_font_styles()
5
{
6
    // Astra — Google Fonts
7
    wp_dequeue_style('astra-google-fonts');
8
    wp_deregister_style('astra-google-fonts');
9
 
10
    // Elementor — Font Awesome 4
11
    wp_dequeue_style('font-awesome');
12
    wp_deregister_style('font-awesome');
13
 
14
    // Elementor — eicons
15
    wp_dequeue_style('elementor-icons');
16
    wp_deregister_style('elementor-icons');
17
}
18
add_action('wp_enqueue_scripts', 'sdstudio_dequeue_font_styles', 9999);
19
add_action('wp_head', 'sdstudio_dequeue_font_styles', 9999);

La priorità 9999 è importante: l'hook deve essere eseguito DOPO che plugin e tema hanno registrato i loro stili. Se il font viene ancora caricato, verifica se un altro plugin lo sta richiamando (ad esempio, un menu o un modulo di contatto potrebbero collegare la propria versione di Font Awesome). Cerca nei file del plugin la stringa wp_enqueue_style con l'handle corrispondente.

Dopo aver aggiunto il codice, l'icona di Font Awesome sul sito scomparirà temporaneamente; è normale. La ripristineremo nello step 4.

Step 3: copia i file dei font in una cartella locale

Quando un font è collegato via CDN o tramite un plugin, il browser effettua una richiesta DNS aggiuntiva a un dominio di terze parti. L'hosting locale dei font elimina questo ritardo. L'algoritmo:

• Trova i file dei font nella struttura del plugin. Per Font Awesome di Elementor, il percorso sarà: /wp-content/plugins/elementor/assets/lib/font-awesome/fonts/. Per eicons: /wp-content/plugins/elementor/assets/lib/eicons/fonts/. Per i Google Fonts, scarica i .woff2 dalla CDN di Google Fonts.

• Crea una cartella /wp-content/fonts/ nella root del sito e copia lì tutti i file necessari. I formati .woff2 (browser moderni) e .woff (fallback per quelli più vecchi) sono sufficienti.

• Se il font era collegato dal tema tramite la CDN di Google Fonts, scarica manualmente il .woff2 attuale tramite un link diretto o usando il plugin OMGF (ne parliamo più avanti).

Ora ogni font ha un percorso locale come /wp-content/fonts/fontawesome-webfont.woff2. Passiamo alla parte più importante: collegarli.

Step 4: collega i font con font-display: swap e preload

Gli stili sono disattivati, i file sono al loro posto. Ora definiamo @font-face con la direttiva corretta font-display: swap e aggiungiamo il preload per un caricamento istantaneo. Inserisci il codice in functions.php tramite l'hook wp_head:

1
/**
2
 * Load fonts locally with font-display: swap and preload
3
 */
4
function sdstudio_inject_font_preload()
5
{
6
    ?>
7
    <!-- Preload critical fonts -->
8
    <link rel="preload" href="/wp-content/fonts/fontawesome-webfont.woff2" as="font" type="font/woff2" crossorigin="anonymous">
9
    <link rel="preload" href="/wp-content/fonts/eicons.woff2" as="font" type="font/woff2" crossorigin="anonymous">
10
 
11
    <style>
12
        /* Font Awesome — icon font */
13
        @font-face {
14
            font-family: 'FontAwesome';
15
            font-display: swap;
16
            font-style: normal;
17
            font-weight: normal;
18
            src: url('/wp-content/fonts/fontawesome-webfont.woff2') format('woff2'),
19
                 url('/wp-content/fonts/fontawesome-webfont.woff') format('woff');
20
        }
21
 
22
        /* eicons — Elementor icons */
23
        @font-face {
24
            font-family: 'eicons';
25
            font-display: swap;
26
            font-style: normal;
27
            font-weight: normal;
28
            src: url('/wp-content/fonts/eicons.woff2') format('woff2'),
29
                 url('/wp-content/fonts/eicons.woff') format('woff');
30
        }
31
    </style>
32
    <?php
33
}
34
add_action('wp_head', 'sdstudio_inject_font_preload', 5);

La priorità 5 in wp_head fa sì che i tag di preload appaiano nell'<head> tra i primi, così il browser inizierà a scaricare il font prima di arrivare al CSS. L'attributo crossorigin="anonymous" è obbligatorio per il preload dei font: senza, il browser ignorerà il preload e scaricherà di nuovo il file.

Una sfumatura importante: l'URL all'interno di @font-face non deve avere parametri di query come ?#iefix o ?v=4.7.0. PageSpeed Insights inciampa su di essi durante l'analisi. Il link deve essere pulito: /wp-content/fonts/fontawesome-webfont.woff2, e basta.

Dopo aver aggiunto il codice, svuota la cache (plugin di caching + Cloudflare, se lo usi) ed esegui di nuovo PageSpeed Insights. L'avviso sui font dovrebbe scomparire. Le icone di Font Awesome tornano al loro posto, ma ora non bloccano la visualizzazione del testo.

Step 5: font personalizzati di Elementor, un caso speciale

Se usi Elementor Pro con la funzione "Font personalizzati", la logica è la stessa, ma ci sono due passaggi aggiuntivi.

Primo, cambia il percorso del font nelle impostazioni di Elementor. Vai su Elementor → Font personalizzati, apri il font desiderato e nel campo URL specifica il percorso locale /wp-content/fonts/your-font.woff2 invece di un link esterno a CDN o Google Fonts:

Secondo, rigenera i CSS di Elementor. Dopo aver cambiato il percorso, vai su Elementor → Strumenti → Rigenera CSS e clicca il pulsante di rigenerazione. Questo costringerà Elementor a ricostruire i file di stile con i nuovi percorsi dei font:

Dopo la rigenerazione, verifica che il percorso del font nell'HTML della pagina porti al file locale, non alla CDN. Poi in header.php (o tramite wp_head come nello step 4) aggiungi il preload per questo font:

1
<link rel="preload" href="/wp-content/fonts/FuturaBookC.woff2" as="font" type="font/woff2" crossorigin="anonymous">

E il corrispondente @font-face con font-display: swap:

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

Percorso alternativo: plugin per l'ottimizzazione automatica

Il metodo manuale dà il pieno controllo ma richiede attenzione quando si aggiornano i plugin (un aggiornamento di Elementor potrebbe ripristinare il collegamento standard dei font). Se vuoi automatizzare il processo, ecco due plugin che risolvono il problema senza modificare il codice.

OMGF (Optimize My Google Fonts). Un plugin gratuito che scansiona tutti i Google Fonts sul sito, li scarica localmente e aggiunge font-display: swap automaticamente. Installalo, clicca "Ottimizza" e tutti i Google Fonts del tuo tema diventano locali con le intestazioni corrette. La versione Pro può funzionare con Adobe Fonts e qualsiasi font da CDN di terze parti.

Swap Google Fonts Display. Un plugin minimalista che fa esattamente una cosa: aggiunge font-display: swap a tutti i Google Fonts al volo. Non scarica localmente ma rimuove l'avviso di PageSpeed Insights in 10 secondi dall'installazione. È adatto come soluzione temporanea o se l'hosting locale dei font non è critico.

I plugin fanno risparmiare tempo, ma ricorda: funzionano solo con i Google Fonts. I font di icone (Font Awesome, eicons) e i font personalizzati di Elementor non vengono toccati; dovrai comunque seguire i passaggi manuali da 1 a 5.

⁉️🤔 Domande frequenti

Devo precaricare TUTTI i font del sito?

No. <link rel="preload"> ha senso solo per uno o due font che compaiono nella prima schermata, ad esempio il font del titolo H1 e il font del testo principale. Precaricare una dozzina di font avrà l'effetto opposto: il browser userà banda per file che non servono subito e rallenterà il caricamento dei contenuti critici. Precariica solo i font usati nel primo viewport. Per un blog tipico, si tratta di un font per i titoli e uno per il testo, in totale due file woff2. Vale la pena precaricare un font di icone solo se un'icona compare nella prima schermata (menu, ricerca). Tutto il resto si caricherà durante lo scorrimento senza danneggiare le metriche di PageSpeed.

Cosa succede se il sito si "rompe" dopo aver disattivato gli stili?

Lo scenario più comune: hai disattivato elementor-icons e le frecce dello slider o l'icona di ricerca sono scomparse. La soluzione è verificare quali elementi specifici usano il font prima di disattivarlo. Apri DevTools (F12), scheda Elementi, trova l'icona e guarda la classe CSS. Se la classe inizia con fa-, è Font Awesome. Se con eicon-, è eicons. Disattiva solo ciò che viene effettivamente usato e collega localmente gli stessi file; visivamente non cambierà nulla. Il sito si "rompe" in due casi: o hai disattivato uno stile che, oltre al font, conteneva regole CSS (raro ma succede con temi come Astra), oppure non hai ricollegato il font localmente. Nel primo caso, estrai le regole CSS dal file disattivato e copiale nel tuo blocco wp_head. Nel secondo caso, aggiungi semplicemente il @font-face mancante.

Questo metodo funziona per qualsiasi tema WordPress?

Sì, con alcune precisazioni. Il principio dequeue style → local fonts → font-display: swap → preload è universale. Cambiano solo gli handle degli stili: per Astra è astra-google-fonts, per GeneratePress è generate-fonts, per OceanWP è oceanwp-google-fonts. Per trovare l'handle del tuo tema, apri il sorgente della pagina (Ctrl+U), trova <link rel="stylesheet" con il font e guarda l'id del tag; quello è l'handle. Poi sostituiscilo in wp_dequeue_style. I temi moderni (2024-2026) aggiungono sempre più spesso font-display: swap di default: Twenty Twenty-Five e i temi a blocchi basati su theme.json hanno già questa impostazione. Prima di modificare il codice, verifica se il tuo tema fa già tutto correttamente e l'avviso è causato solo da un font di icone di un plugin separato.

È obbligatorio copiare i font localmente?

Tecnicamente no. font-display: swap funziona anche con font collegati via CDN (Google Fonts, cdnjs). Ma l'hosting locale offre due vantaggi: primo, elimini una richiesta DNS aggiuntiva a un dominio di terze parti (risparmiando 50-200 ms), e secondo, non dipendi dalla disponibilità della CDN. Se Google Fonts va giù, il tuo sito manterrà un testo leggibile. Per un sito in produzione, l'hosting locale è la best practice; per un progetto personale, è opzionale. Eccezione: i font di icone. Font Awesome, eicons e dashicons vengono caricati dal plugin (localmente per definizione); copiarli nella cartella root serve solo per "intercettare" il controllo del caricamento dopo il dequeue. Il file stesso è già fisicamente sul server.

Cosa fare per l'avviso sui font: l'algoritmo finale

Segui i cinque step di questa guida e l'avviso "Assicurati che il testo rimanga visibile durante il caricamento dei webfont" scomparirà dal report di PageSpeed Insights. In sintesi: disattiva il collegamento standard → metti i font in locale → ripristinali con font-display: swap → precarica i woff2 critici → per Elementor, cambia anche il percorso e rigenera i CSS. Come risultato, il testo sul sito è visibile all'istante, le metriche LCP e FCP migliorano e il visitatore non vede una pagina che "salta".

Se non vuoi mettere mano al codice, inizia con il plugin OMGF per i Google Fonts. Per i font di icone, non esiste un plugin "pillola magica"; dovrai comunque gestirli manualmente, ma sono 20 minuti di lavoro che ripagano con punteggi PageSpeed più alti e reali miglioramenti della velocità di caricamento. Prova e testa dopo ogni modifica; solo un audit ripetuto mostrerà che il problema è effettivamente risolto.