Ce este Font-Display?

Proprietatea CSS care controleaza cum se afiseaza textul inainte de incarcarea fontului

Definiție Font-Display

font-display controleaza ce se intampla cu textul pana cand fontul custom se incarca. Cu font-display: swap, browserul afiseaza textul imediat cu un font de sistem si il inlocuieste cand fontul custom e gata. Fara aceasta setare, textul poate fi invizibil (FOIT — Flash of Invisible Text) secunde intregi, ceea ce afecteaza LCP.

De ce contează Font-Display

Proprietatea CSS font-display controleaza ce se intampla cu textul cand fontul custom nu s-a incarcat inca. Valoarea implicita (auto) lasa browserul sa aleaga — Chrome ascunde textul 3 secunde (FOIT), Safari il ascunde indefinit. Aceasta comportare face ca utilizatorii sa vada un ecran fara text in primele secunde, crescand rata de abandon si afectand LCP-ul daca textul este cel mai mare element.

Cum verifici Font-Display

SoftAudit analizeaza declaratiile @font-face din CSS-ul paginii si verifica prezenta proprietatii font-display pe fiecare font incarcat. Raportul identifica fonturile fara font-display explicit si evalueaza impactul asupra CLS si LCP in functie de valoarea setata.

Greșeli frecvente

Setarea font-display: swap pe toate fonturile previne FOIT dar cauzeaza FOUT (Flash of Unstyled Text) — textul apare prima data in fontul fallback si se schimba vizibil cand fontul custom se incarca, contribuind la CLS. De asemenea, incarcarea a 5-10 variante de font (regular, bold, italic, light etc.) cand doar 2-3 sunt folosite adauga sute de KB inutil.

Bune practici

Foloseste font-display: swap pentru fonturile principale de text si font-display: optional pentru fonturile decorative care nu sunt esentiale. Preincarca fonturile critice cu <link rel=preload as=font type=font/woff2 crossorigin> si limiteaza-te la maximum 2-3 variante de greutate. Self-host fonturile pentru a elimina request-urile catre Google Fonts.