Font-display swap migliora la user experience senza flash di testo invisibile

Quando si utilizzano i web font, è spesso consigliato impostare la proprietà font-display su swap nei set di regole @font-face per evitare il cosiddetto flash di testo invisibile (FOIT). Questo fenomeno si verifica quando il testo è impostato con un tipo di carattere non ancora scaricato dal browser. Con font-display: swap, il browser renderizzerà inizialmente il testo utilizzando il tipo di carattere di riserva specificato nella proprietà font-family. Ad esempio: body { font-family: PT Serif, Times New Roman, serif; }. Il browser imposterà inizialmente il testo del body in Times New Roman (o serif, se il primo non è installato localmente). Una volta scaricato il web font richiesto (ad esempio PT Serif), il testo verrà reimpaginato. Questo migliora l’esperienza utente soprattutto in condizioni di rete a bassa larghezza di banda. Tuttavia, può causare problemi di reflow e spostamenti del layout se i font di riserva e i web font non sono metricamente compatibili, influenzando il punteggio di cumulative layout shift (CLS). Fortunatamente, CSS moderni permettono ai sviluppatori di sovrascrivere le metriche dei font con proprietà come size-adjust, ascent-override e descent-override.