Ospita in locale i font di Google per migliori Core Web Vitals

Ospitare in locale i font di Google per Core Web Vitals migliori

Google Fonts è utilizzato sul 54% di tutti i siti web secondo il Web Almanac 2025. La maggior parte di questi siti carica i font dai server di Google. Questo è un problema. Ogni richiesta a Google Fonts aggiunge connessioni esterne, CSS che blocca il rendering e file di font che non puoi precaricare (preload), memorizzare nella cache o controllare. Ospitare in locale questi stessi font elimina tutti questi problemi e richiede circa 10 minuti.

Ultima revisione da parte di Arjen Karel a Febbraio 2026

Comprendere i Core Web Vitals

I Core Web Vitals sono tre metriche che Google utilizza come segnali di posizionamento: LCP (caricamento), INP (interattività) e CLS (stabilità visiva). Ospitare i font in locale migliora principalmente LCP e CLS, e può anche migliorare il First Contentful Paint (FCP).

Impatto di Google Fonts sui Core Web Vitals

Google Fonts, spesso inclusi nelle pagine web per migliorare la tipografia e il design, possono avere un impatto significativo sui Core Web Vitals, principalmente su Largest Contentful Paint (LCP) e Cumulative Layout Shift (CLS).

Per la maggior parte delle persone con cui parlo queste sono informazioni nuove. La CDN di Google dovrebbe essere la migliore al mondo. Quindi perché Google Fonts è negativo per la velocità della pagina?

1. L'argomento della "cache condivisa" è morto. Molti sviluppatori credono ancora che, poiché Google Fonts è così popolare, i visitatori probabilmente hanno il font memorizzato nella cache da un altro sito. Questo era vero prima del 2020. A partire da Chrome v86 e Safari (che lo fa dal 2013), i browser partizionano la loro cache HTTP in base al dominio di primo livello. Ciò significa che il tuo sito scarica Google Fonts da zero per ogni nuovo visitatore, indipendentemente dagli altri siti che ha visitato. Il vantaggio in termini di prestazioni di una cache CDN condivisa non esiste più.

2. Il foglio di stile non è mai nella cache del browser per i nuovi visitatori. Il primo problema con Google Fonts è che si basa su un foglio di stile esterno ospitato da fonts.google.com o fonts.googleapis.com. Questo foglio di stile non può essere riutilizzato da domini diversi (come molti sembrano pensare). Ciò significa che il foglio di stile che blocca il rendering non viene mai servito dalla velocissima cache del browser per i visitatori per la prima volta e rallenterà sempre il rendering della pagina.

3. Richiede 2 connessioni a 2 nuovi server. Il secondo problema è che, per scaricare il file CSS e i file dei font, dobbiamo connetterci a 2 server diversi. Ogni connessione iniziale a un nuovo server ha un sovraccarico significativo e richiede del tempo extra. Tempo che avremmo potuto risparmiare, servendo i file dalla nostra connessione già aperta al nostro server. Per evitare questo, Google consiglia di utilizzare preconnect verso i loro domini. Questo mitigherà un po' il problema ma è ancora lontano dall'essere perfetto.

4. Hai un controllo limitato sull'attributo font-display. Sebbene Google Fonts ti consenta di impostare l'attributo font-display, puoi definirlo solo a livello globale. Ciò significa che tutti i file woff2 otterranno la stessa impostazione font-display.

5. La posizione finale del file woff2 è sconosciuta. Questo significa che non possiamo precaricare i nostri font più importanti. Di conseguenza, i nostri file dei font vengono messi in coda per il download in una fase relativamente avanzata e probabilmente otterremo un layout shift visibile causato dal flash of unstyled text (FOUT). Leggi di più su come assicurarsi che il testo rimanga visibile durante il caricamento del webfont.

6. Non hai nessun controllo sui file dei font. Non puoi applicare ulteriori subsetting, non puoi impostare intestazioni di cache lunghe e non puoi servirli dalla tua CDN.

<link rel="preconnect" href="https://fonts.googleapis.com" crossorigin>
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

Vantaggi di ospitare in locale Google Fonts

Ospitare in locale Google Fonts implica servire i file dei font dai propri server invece di fare affidamento sui server esterni di Google. Questo approccio può portare diversi vantaggi:

1. Migliore velocità di consegna dei font: Ospitare in locale i font riduce la dipendenza da server esterni, portando a una consegna dei font più rapida e, di conseguenza, a un rendering più veloce del contenuto di testo. Questo miglioramento può avere un impatto positivo sull'LCP, assicurando che l'elemento di testo più grande diventi visibile più rapidamente. Il Web Almanac 2025 mostra che l'hosting in locale è in aumento: il 31,5% dei siti desktop ora ospita esclusivamente i propri font in locale, rispetto al 28% del 2024.

2. Layout Shifts ridotti: Ospitando Google Fonts in locale, puoi controllare come il font viene caricato e visualizzato, riducendo al minimo le possibilità di layout shifts causati da un rendering ritardato del font. Questo aiuta a migliorare la stabilità visiva complessiva della tua pagina web e influisce positivamente sul CLS.

3. Pieno controllo su caching e preloading: Quando ospiti in locale, conosci l'URL esatto di ogni file del font. Ciò significa che puoi precaricare i font critici, impostare intestazioni di cache aggressive (un anno o più) e servire i font dalla stessa connessione del resto della tua pagina.

Conformità al GDPR

A gennaio 2022, il Tribunale regionale di Monaco ha stabilito che caricare Google Fonts dai server di Google viola il GDPR in quanto trasferisce gli indirizzi IP dei visitatori a Google senza consenso. Ospitarli in locale elimina completamente questo problema, poiché nessun dato viene inviato a Google quando i font si caricano. Se il tuo sito ha visitatori europei, questo è un motivo in più per ospitarli in locale.

Best practice per ospitare Google Fonts in locale

Per ottimizzare i tuoi Google Fonts ospitati in locale e ottenere prestazioni migliori per i Core Web Vitals, considera l'implementazione delle seguenti best practice:

1. Usa solo il formato WOFF2: WOFF2 offre la migliore compressione (circa il 30% più piccolo del WOFF) e ha un supporto del browser superiore al 96%. L'unico browser che non supporta WOFF2 è Internet Explorer, che ha raggiunto la fine del suo ciclo di vita a giugno 2022. Non hai più bisogno di un fallback WOFF.

2. Font Subsetting: Per ridurre ulteriormente le dimensioni dei file dei font, considera l'utilizzo del font subsetting, che consiste nell'includere solo i caratteri necessari per il contenuto della tua pagina web. Questo può portare a un caricamento dei font più rapido e a un miglioramento dei Core Web Vitals. Google Fonts esegue già il subsetting per range unicode, ma quando ospiti in locale puoi spingerti oltre con strumenti come fonttools.

3. Attributo font-display strategico: Configura l'attributo font-display in modo strategico per controllare il rendering del testo durante il caricamento del font. Il valore "swap" velocizzerà il First Contentful Paint garantendo che vengano visualizzati i font di fallback finché il web font non è completamente caricato. Il valore "optional" salterà del tutto lo scambio di font, prevenendo i layout shifts non sostituendo mai il font di fallback. Un mix strategico di questi due ottimizzerà spesso sia il Cumulative Layout Shift che il First Contentful Paint. Secondo il Web Almanac 2025, il 50% delle pagine ora utilizza font-display: swap, ma solo lo 0,5% utilizza font-display: optional, che è la scelta migliore per massimizzare le prestazioni CWV sui font non critici.

4. Precarica i font: Assicurati che i font siano disponibili il prima possibile precaricando i font più importanti (1 o 2 al massimo) con il meccanismo di preload link. Includi sempre l'attributo crossorigin, anche per i font della stessa origine, altrimenti il browser scaricherà il font due volte. Solo il 12% delle pagine precarica i propri font, quindi questa è una vittoria facile.

<link rel="preload" as="font" href="/fonts/inter-400.woff2" type="font/woff2" crossorigin>

Come ospitare in locale un font di Google (nel modo giusto)

Scaricare e ospitare in locale un font di Google richiede circa 10 minuti. Tieni presente che dovresti sempre rivedere la licenza del font prima di utilizzarlo. La maggior parte dei Google Fonts è disponibile con la licenza SIL Open Font, che ne consente l'uso gratuito, incluso l'uso commerciale.

Il metodo più rapido è utilizzare google-webfonts-helper, che ti consente di scaricare qualsiasi Google Font come file WOFF2 con CSS pronto all'uso. Ma se vuoi farlo manualmente per capire esattamente cosa sta succedendo, segui questi passaggi:

1. Vai al sito web di Google Fonts su fonts.google.com.

2. Seleziona il font che vuoi utilizzare e scegli i pesi del font che desideri includere.

3. Nella pagina del font, nella barra in alto, clicca sul pulsante delle 'famiglie selezionate'. Lì troverai il link al foglio di stile ospitato da Google.

   

4. Copia l'URL di questo foglio di stile e aprilo nel tuo browser. Ora vedrai tutte le dichiarazioni font-face disponibili per il font.

   

5. Potresti notare che c'è più di 1 file woff2 anche se abbiamo utilizzato un solo file di font. Questo perché esiste un file di font diverso per diversi range unicode. Per scoprire quali font dovremmo scaricare, dovresti aggiungere temporaneamente il foglio di stile ospitato da Google al tuo sito web. Usa la scorciatoia Ctrl-Shift-I per aprire i tuoi DevTools di Chrome. Vai alla scheda network e clicca su Font. Ora aggiorna la pagina (Ctrl-R) per vedere quale font viene attivato per il download.

6. Fai corrispondere questo nome file del font al file woff2 corrispondente nel foglio di stile. Ora sai quale file di font viene utilizzato per il tuo sito web!

7. Il passaggio successivo è copiare l'URL completo del font e aprirlo nel tuo browser. Questo avvierà il download per questo file di font. Copia questo file sul tuo sito web.

8. Copia il CSS per il webfont utilizzato nel passaggio 7 e incollalo nel tuo foglio di stile. Non dimenticare di cambiare l'URL dalla CDN di Google al tuo server (ad esempio '/fonts/inter-400.woff2').

9. Precarica il font (se è un font visivamente importante).

Ora hai scaricato e ospitato con successo in locale il Google Font di tua scelta.

Un esempio di vita reale

Ecco un esempio completo che utilizza il font Inter con tutte le best practice applicate: preloading, solo WOFF2, un valore font-display strategico e un font di sistema come fallback.

<head>
  <title>Self-Hosted Google Fonts</title>
  <!-- preload the font (crossorigin is required, even for same-origin fonts) -->
  <link rel="preload" as="font" href="/fonts/inter-400.woff2" type="font/woff2" crossorigin>
  <style>
    /* Self-hosted Inter font with WOFF2 format */
    @font-face {
      font-family: 'Inter';
      font-style: normal;
      font-weight: 400;
      src: url('/fonts/inter-400.woff2') format('woff2');
      font-display: optional;
    }

    /* Fallback to system-ui font */
    body {
      font-family: 'Inter', system-ui, sans-serif;
    }
  </style>
</head>
<body>
  <h1>Welcome to My Website</h1>
  <p>This page uses Inter with a system-ui fallback.</p>
</body>

Monitorare l'impatto

Dopo essere passati ai font ospitati in locale, verifica il miglioramento con il Real User Monitoring. Nei nostri dati di CoreDash, i siti che ospitano in locale i propri font con un preloading appropriato vedono un miglioramento mediano dell'LCP di 180ms rispetto al caricamento dalla CDN di Google Fonts. Tieni traccia dei tuoi LCP, CLS e FCP nel tempo per assicurarti che il cambiamento stia funzionando.