Mostra subito il testo di fallback quando i lettori hanno bisogno delle parole per usare una pagina. Scegli di nascondere temporaneamente il testo solo per un elemento piccolo e per cui l’uso di un font specifico sia giustificato. Per una pagina che gestisci su un Mac, questa guida spiega come scegliere una strategia e verificarne l’effetto sul flusso del testo.

Cosa cambia durante il caricamento di un font?

Un font di fallback visualizza lo stesso testo con un altro carattere tipografico mentre quello richiesto non è disponibile. Il testo temporaneamente nascosto corrisponde al periodo di blocco del caricamento del font: il browser impagina un carattere di fallback invisibile. La sequenza di caricamento inizia quando il browser prova per la prima volta a usare il carattere scaricabile. Il riferimento di MDN a font-display spiega queste fasi.

Questa distinzione è importante quando si esamina una pagina. Un titolo vuoto non dimostra che siano state riservate le sue dimensioni finali. Durante il periodo di blocco, il browser continua a usare l’impaginazione del font di fallback; nascondere le lettere non consente di sapere quali saranno le interruzioni di riga del font scaricato. Valuta separatamente la visibilità e la stabilità dell’impaginazione.

Il controllo pertinente è il descrittore font-display all’interno di una regola @font-face. Fa parte della definizione del carattere, non di un normale selettore di paragrafo. È una scelta che riguarda la creazione della pagina: usa il foglio di stile o le impostazioni dei font disponibili per la pagina che gestisci. MDN documenta dove si applica font-display.

Quale valore di font-display è adatto alle esigenze del lettore?

Prima di modificare il codice, decidi due cose: se le parole debbano comparire subito con un altro font e se sia accettabile sostituirlo in seguito. La tabella seguente traduce i periodi di caricamento documentati in possibili scelte per una pagina pubblica ipotetica. Le definizioni dei valori di MDN descrivono il comportamento sottostante.

Valore Quando il carattere non è disponibile Possibilità di sostituire il fallback Punto di partenza appropriato
swap Blocco estremamente breve, poi fallback visibile Periodo di sostituzione illimitato Un titolo breve per cui il carattere tipografico previsto è importante
fallback Blocco estremamente breve, poi fallback visibile Breve periodo di sostituzione Testo da leggere in cui è accettabile un cambio iniziale
optional Blocco estremamente breve Nessun periodo di sostituzione Testo in cui è più importante mantenere il primo font visibile
block Fallback invisibile durante un breve periodo di blocco, poi fallback visibile Periodo di sostituzione illimitato Un elemento piccolo che dipende da un font specifico
auto Strategia scelta dal browser Strategia scelta dal browser Accettare il comportamento predefinito del browser

Queste sono categorie di strategie, non intervalli di tempo esatti configurabili. L’attuale bozza di lavoro CSS Fonts Level 4 del W3C consiglia durate tipiche, ma consente esplicitamente differenze tra browser. Inoltre, limita block a piccoli frammenti di testo per i quali il font specifico è necessario per l’usabilità. La sola preferenza per l’aspetto di un titolo è un motivo debole per lasciarlo vuoto. W3C: controllo della visualizzazione dei font per ciascun font-face.

Per una pagina ipotetica con un titolo chiamato “Raccolta di esempio”, una voce di navigazione chiamata “Sezione uno” e diversi paragrafi, valuta come punto di partenza fallback per il testo da leggere. Considera swap per il titolo breve, se è importante che alla fine venga usato il carattere tipografico previsto. Scegli optional se la priorità è mantenere la prima visualizzazione. Queste raccomandazioni applicano le strategie documentate alle esigenze del lettore; non si basano su risultati misurati.

Usa un supporto decisionale per visibilità e riflusso

Valuta separatamente ciascun tipo di testo. Una voce di navigazione e un paragrafo possono usare la stessa famiglia, ma avere vincoli di impaginazione diversi. La domanda utile è se un cambio di font impedisca a qualcuno di proseguire con la propria attività o ne modifichi soltanto l’aspetto.

  1. Leggi la pagina con il font di fallback. Si riesce a capire “Sezione uno”, individuare il titolo e leggere i paragrafi? Se sì, il fallback visibile è un punto di partenza praticabile.
  2. Osserva la sostituzione del font. Il titolo occupa una riga in più? Le etichette vanno a capo? Il paragrafo successivo si sposta?
  3. Scegli un intervallo di sostituzione accettabile. Usa swap se una sostituzione tardiva è ancora accettabile, fallback se è gradita solo una sostituzione iniziale oppure optional se il primo font visibile deve rimanere.
  4. Chiediti quale motivo concreto giustifica il testo vuoto. Prima di scegliere block, identifica cosa diventerebbe inutilizzabile con il fallback e perché non è possibile eliminare tale dipendenza.

Per esempio, supponiamo che “Raccolta di esempio” occupi una riga con il fallback e due con il font scaricato. Se il titolo ha un’interlinea ipotetica di 40 pixel, la riga in più aumenta la sua altezza di 40 pixel, supponendo che la spaziatura non cambi. Di conseguenza, il contenuto sottostante potrebbe spostarsi. Sono valori illustrativi, non misurazioni del browser.

Nascondere temporaneamente il testo non risolve questa differenza. Le opzioni pratiche sono migliorare la corrispondenza del fallback, modificare l’impaginazione dopo averla verificata oppure scegliere una strategia che eviti una sostituzione tardiva. In base al comportamento optional dell’attuale bozza del W3C, una volta visualizzato il testo di fallback, il carattere facoltativo non deve sostituirlo per il resto della durata di quella pagina. La definizione di optional del W3C.

Come applicare e verificare la scelta su un Mac

Usa una pagina di cui puoi modificare il foglio di stile e in cui un font web esistente si carichi già correttamente. Mantieni il riferimento effettivo al file del font: per questo confronto non serve scaricare un nuovo font né aggiungere un asset sostitutivo.

Individua la dichiarazione @font-face pertinente nel foglio di stile sorgente della pagina o nella configurazione dei font supportata. Imposta il suo descrittore font-display sul valore da provare, per esempio font-display: fallback;. Esamina anche le altre dichiarazioni per pesi e stili, così da verificare i caratteri che la pagina richiede davvero. L’esempio di font-display di MDN mostra dove inserire il descrittore.

In Chrome sul Mac, premi Command + Option + I per aprire DevTools. In alternativa, fai clic destro sul testo interessato e scegli Inspect; il pannello Elements mostra i CSS applicati in Styles. Le istruzioni di Chrome per aprire DevTools descrivono entrambi i metodi.

Dopo ogni modifica al foglio di stile, esegui il confronto seguente. Mantieni costanti la larghezza della finestra e il livello di zoom, così potrai attribuire le differenze alla strategia di caricamento dei font.

  1. Apri Network, attiva Disable cache, seleziona un preset di velocità ridotta dal menu Throttling e ricarica la pagina. Usa il filtro Font per concentrarti sulle richieste dei font.
  2. Osserva il titolo, la navigazione e l’inizio del paragrafo. Annota se il testo inizialmente è vuoto, compare con il fallback e cambia in seguito le interruzioni di riga.
  3. Se la transizione è troppo rapida da esaminare, attiva Capture screenshots nelle impostazioni del pannello Network e ricarica la pagina per analizzare la sequenza di caricamento.
  4. Disattiva la limitazione della velocità e deseleziona Disable cache. Ricarica di nuovo per confrontare una visita ripetuta in condizioni normali. Il riferimento alle funzioni di rete di Chrome documenta questi controlli.

Verifica separatamente il caso in cui il font non sia disponibile. In Network, fai clic destro sulla richiesta effettiva del font e seleziona Block request, poi ricarica la pagina. Chrome mostra il modello corrispondente in Request conditions. Controlla che le parole diventino leggibili e che la pagina resti utilizzabile con il fallback. In seguito, rimuovi o disattiva il modello di prova. La documentazione di Chrome sulle condizioni delle richieste spiega come bloccare le richieste e individuarle.

Se Safari fa parte dell’ambiente di navigazione Mac a cui ti rivolgi, ripeti l’esame della pagina anche lì. Considera la prova in Chrome come un’indicazione del rendering di quel browser, non come prova di tempistiche identiche altrove: la specifica consente differenze tra browser. Tieni una breve nota comparativa con browser, valore provato, visibilità iniziale e a capo osservati.

E se il fallback visibile cambia troppo l’impaginazione?

Parti dal testo effettivo e dalla larghezza disponibile. Confronta etichette brevi, il titolo più lungo e diverse righe di paragrafi. Anche se un fallback somiglia visivamente al font web, l’ampiezza dei caratteri può essere diversa e produrre interruzioni di riga diverse.

Per ottenere una corrispondenza più precisa, size-adjust ridimensiona le forme e le metriche dei glifi di un carattere, compresa la larghezza dei glifi. MDN mostra come definire un carattere locale di fallback e modificarlo per farlo somigliare di più a un font web primario. Determina la percentuale adatta alla coppia che usi; la percentuale di un esempio della documentazione non è un valore universale. MDN: size-adjust.

Le metriche verticali richiedono una verifica a parte. Il descrittore ascent-override controlla la metrica sopra la linea di base usata per impaginare le caselle di riga, ma al momento MDN ne indica la disponibilità limitata. Considera questa regolazione un miglioramento aggiuntivo e mantieni un’impaginazione leggibile con il fallback nei browser che non la supportano. MDN: ascent-override.

Lascia che sia il browser a occuparsi della composizione del testo. Non cercare di stabilizzare un titolo sostituendo o misurando ogni carattere singolarmente. La corrispondenza dei font in CSS gestisce in modo speciale i cluster di grafemi, ad esempio un carattere di base con un segno diacritico combinante. Esamina le etichette complete e le righe nella loro impaginazione effettiva. W3C: corrispondenza dei cluster.

Il pre-caricamento o una libreria per il caricamento dei font cambiano la decisione?

Il pre-caricamento riguarda il rilevamento delle risorse. Lo standard HTML WHATWG definisce preload come il recupero e la memorizzazione nella cache anticipati di una risorsa prevista per la navigazione corrente. Non determina la tua strategia font-display. Valutalo solo dopo aver scelto il comportamento di visualizzazione accettabile: recuperare prima la risorsa non sostituisce la decisione su cosa accade quando il carattere non è ancora disponibile. WHATWG: tipo di link preload.

Per il normale testo di una pagina, inizia dai CSS. Se un progetto esistente usa Font Face Observer, il metodo documentato load() restituisce una promise che si risolve al caricamento del font e viene rifiutata in caso di errore. Il nome della famiglia e le descrizioni facoltative di peso, stile e larghezza dovrebbero corrispondere al carattere richiesto. La libreria documenta anche come fornire un testo di prova adatto quando i caratteri predefiniti non sono presenti nel font. Documentazione di Font Face Observer.

Una callback della libreria eseguita correttamente segnala che il caricamento è avvenuto; spetta comunque all’applicazione stabilire cosa diventa visibile. Se una logica personalizzata nasconde il testo, specifica un percorso per gli errori che ripristini un fallback leggibile. Altrimenti, il rifiuto del caricamento potrebbe lasciare attiva la regola che nasconde il testo. Questa è una raccomandazione di implementazione basata sui percorsi di successo e di errore documentati dalla libreria.

Anche l’API nativa ha un limite simile. document.fonts.ready viene completata dopo il caricamento e le operazioni di impaginazione dei font usati; quell’insieme può essere diverso da quello di tutti i font dichiarati, compresi i caratteri facoltativi per cui è trascorsa l’opportunità di essere usati. Non dimostra quindi che ogni carattere previsto sia visibile. MDN: proprietà fonts di Document.

Allo stesso modo, l’argomento di testo facoltativo di document.fonts.load() seleziona i caratteri corrispondenti in base ai loro intervalli Unicode; non verifica la copertura dei singoli glifi. Il completamento del caricamento e la corretta visualizzazione dell’intero esempio richiedono verifiche distinte. MDN: metodo load() di FontFaceSet.

Scegli la strategia esaminando la stessa pagina durante il caricamento lento, quando il font non è disponibile e nelle visite ripetute. Mantieni leggibili le parole comuni, decidi esplicitamente se è accettabile una sostituzione tardiva e consenti il testo temporaneamente nascosto solo quando è dimostrata la dipendenza di un elemento piccolo da un font specifico. Il risultato dovrebbe permettere di continuare a leggere comodamente “Raccolta di esempio” in tutte le condizioni verificate.

Fonti