I testi del sito compaiono in ritardo: come controllare il caricamento dei font

Distinguere testo invisibile e cambio di carattere

Apri una pagina che mostra il problema e registra i primi istanti. Il testo manca completamente, compare con un carattere diverso oppure occupa uno spazio che cambia? Annota quali blocchi sono coinvolti: solo i titoli, anche i paragrafi o i comandi. Se scompaiono tutti i contenuti insieme, potrebbe esserci una regola di visibilità o un caricatore generale, non necessariamente un problema tipografico.

Ripeti il confronto su una pagina interna e su un telefono. Chi visita spesso il sito può avere già i file disponibili, mentre un nuovo cliente vede un comportamento diverso. Riporta quindi se la prova parte da una sessione abituale o da un ambiente predisposto per simulare la prima visita. Non cambiare contemporaneamente font, rete e pagina.

Scoprire quali famiglie e varianti vengono scaricate

Chiedi un inventario dei font usati: nome della famiglia, file, provenienza, peso e pagine che ne hanno bisogno. Un tema, un modulo e un componente esterno possono introdurre caratteri differenti. Distinguere ciò che è richiesto dal progetto da ciò che è rimasto dopo un aggiornamento permette di ridurre complessità senza alterare l’immagine aziendale.

La guida web.dev ai font (si apre in una nuova scheda) spiega che il browser determina quali risorse tipografiche servono al contenuto. Il tecnico può verificarle nel pannello di rete, confrontando richieste, dimensioni e tempi. La semplice presenza di una dichiarazione nel foglio di stile non prova che quel file venga scaricato in ogni pagina.

Decidere che cosa mostrare durante l’attesa

La proprietà font-display, descritta da MDN (si apre in una nuova scheda), stabilisce come gestire il periodo in cui il carattere non è pronto. Le opzioni comportano compromessi fra testo temporaneamente invisibile, comparsa con un fallback e sostituzione successiva. La scelta deve riflettere la funzione del testo, non essere applicata come ricetta universale.

Confronta le alternative sul titolo e su un paragrafo reale. Per una pagina di servizi, poter capire subito l’offerta può contare più di una sostituzione tipografica tardiva. Un marchio disegnato come immagine ha invece esigenze differenti da un prezzo o da un messaggio di errore. Concorda il comportamento desiderato e documenta anche ciò che accade se il download non riesce.

Progettare il carattere di riserva con testi veri

Il fallback non va valutato soltanto su una parola breve. Prepara titoli lunghi, indirizzi, cifre, accenti e pulsanti con etichette complete. Controlla righe, interlinea e spazio disponibile in verticale e orizzontale. Una differenza di larghezza può spingere un comando sotto un altro elemento oppure rendere meno chiara la gerarchia dei contenuti.

Verifica il risultato con testo ingrandito e sulle larghezze usate dai clienti. Se il problema principale è lo spostamento della pagina, la guida al CLS aiuta a collegarlo al cambiamento geometrico. Non bloccare lo zoom per nascondere il difetto: il layout deve accogliere le parole anche quando il carattere definitivo non è disponibile.

Ridurre file e dipendenze senza perdere caratteri utili

Elimina le varianti inutilizzate solo dopo aver controllato tutte le tipologie di pagina, comprese area clienti e messaggi del modulo. Un carattere variabile può riunire più pesi, ma va valutato sul progetto concreto: il nome del formato non dimostra da solo che la soluzione sia più leggera. Considera anche licenze, aggiornamenti e responsabilità di gestione dei file.

Una suddivisione del font deve preservare i caratteri necessari alle lingue pubblicate. Prova cognomi, simboli di valuta e segni presenti nei cataloghi. Se i testi arrivano da un gestionale, usa un campione che rappresenti anche quei contenuti. Risolvere la lentezza introducendo simboli mancanti o caratteri incoerenti sposta il problema sull’esperienza del cliente.

Usare priorità e precaricamenti con uno scopo preciso

Il precaricamento può anticipare un font realmente necessario all’apertura, ma non è utile dichiarare urgenti tutte le varianti. Verifica che il file richiesto in anticipo coincida con quello usato, e che la configurazione eviti download inutili. Un font secondario non dovrebbe competere senza motivo con l’immagine che serve a comprendere il servizio.

Esempio ipotetico: un catalogo carica quattro pesi, ma la prima schermata usa soltanto testo normale e un titolo. Il confronto mostra che due varianti appartengono a un componente assente dalla pagina. La prova consiste nel correggere quella dipendenza e ripetere il caricamento, conservando prima e dopo. Per il ritardo del contenuto principale nel suo insieme, consulta la guida sull’LCP.

Collaudare la lettura prima di estendere la modifica

Chiedi tre verifiche distinte: prima apertura con rete rallentata, visita successiva e caricamento con il font reso indisponibile nell’ambiente di prova. In ogni caso il lettore deve capire l’offerta e riconoscere i comandi. Controlla anche che le icone indispensabili non diventino simboli vuoti se dipendono da un file tipografico.

Confronta desktop e smartphone, una pagina breve e una lunga, oltre a errori e conferme del modulo. Conserva screenshot con gli stessi contenuti e annota le differenze accettate. Includi questo controllo quando cambiano tema, libreria di componenti o identità visiva: una nuova variante può reintrodurre attese anche se i testi non sono cambiati. La verifica di accessibilità completa il controllo della leggibilità.

Domande frequenti

Devo rinunciare al font del marchio?

Non necessariamente. Prima verifica varianti, dipendenze, tempi e fallback. Spesso il problema riguarda il caricamento o una configurazione incoerente, non la scelta grafica in sé.

Un font ospitato sul sito è sempre più veloce?

No. Conta il percorso effettivo della richiesta, la configurazione e il file trasferito. Confronta le soluzioni sul sito reale invece di dedurre il risultato dalla sola provenienza.