Optimizarea fonturilor web: tipografie rapidă fără sacrificarea designului

Fonturile web personalizate îmbunătățesc semnificativ aspectul vizual al site-ului, dar pot afecta grav performanța dacă nu sunt optimizate corect. Fonturile neoptimizate sunt o cauză frecventă a CLS (Cumulative Layout Shift) și a timpilor mari de afișare a textului.

Google Fonts și alte servicii de fonturi web sunt convenabile, dar adaugă request-uri externe și pot genera latențe semnificative, mai ales pe conexiuni mobile sau în regiuni îndepărtate de serverele furnizorului.

Optimizarea fonturilor web vă permite să mențineți o tipografie atractivă și consistentă, în timp ce minimizați impactul asupra performanței site-ului și a scorurilor Core Web Vitals.

Optimizarea fonturilor web: tipografie rapidă fără sacrificarea designului

Fonturile web sunt fișiere descărcate din server (sau un CDN extern) care permit afișarea unor fonturi personalizate în browser, dincolo de fonturile de sistem disponibile pe dispozitivul utilizatorului.

Formatul WOFF2 este standardul modern pentru fonturile web: oferă compresie Brotli superioară față de WOFF1 și este suportat de toate browserele actuale. Utilizați exclusiv WOFF2 în producție, oferind WOFF ca fallback doar dacă suportați browser-e vechi.

Fonturile afectează trei metrici Core Web Vitals: LCP (dacă textul principal utilizează un font web), CLS (dacă fontul schimbă layout-ul la încărcare) și FID/INP (indirect, prin blocarea thread-ului principal la parsarea CSS).

Problema FOIT și FOUT

FOIT (Flash of Invisible Text) apare când browser-ul ascunde textul până la descărcarea fontului web. Utilizatorul vede o pagină fără text pentru câteva secunde, ceea ce afectează negativ experiența și LCP-ul.

FOUT (Flash of Unstyled Text) apare când browser-ul afișează mai întâi textul cu un font de sistem (fallback), înlocuindu-l cu fontul web după descărcare. Schimbarea de font poate cauza CLS dacă dimensiunile diferă.

Soluția optimă este `font-display: swap` în CSS: browser-ul afișează imediat textul cu fontul fallback și înlocuiește cu fontul web după descărcare. Ajustați metricile fontului fallback (ascent, descent, line-gap) pentru a minimiza CLS la swap.

Self-hosting vs. Google Fonts

Google Fonts este gratuit și convenabil, dar fiecare vizitator trebuie să facă un request DNS și o conexiune TCP la fonts.googleapis.com și fonts.gstatic.com. Latența suplimentară poate fi de 100-300ms, semnificativă pe conexiuni mobile.

Self-hosting-ul fonturilor (găzduire pe propriul server) elimină request-urile externe și permite caching agresiv. Descărcați fonturile WOFF2 de pe Google Fonts (google-webfonts-helper.herokuapp.com), uploadeaza-le pe server și referențiați-le din CSS.

Dacă utilizați Google Fonts, adăugați `` și `` în head-ul paginii pentru a stabili conexiunile în avans și a reduce latența.

Subsetting fonturilor

Un font complet poate conține sute sau mii de caractere pentru alfabete multiple. Subsetting extrage doar caracterele efectiv utilizate pe site, reducând dramatic dimensiunea fișierului. Un font complet de 200KB poate fi redus la 20-30KB după subsetting.

Google Fonts aplică automat subsetting per limbă dacă specificați parametrul `&subset=latin` sau `&subset=latin-ext`. Pentru self-hosting, utilizați fonttools (pyftsubset) sau glyphhanger pentru a crea subset-uri personalizate.

Pentru site-urile românești, asigurați-vă că subset-ul include caracterele specifice limbii române: ă, â, î, ș, ț și variantele lor cu majusculă. Fără aceste caractere, textul românesc va fi afișat cu fontul fallback pentru literele speciale.

Preloading fonturilor critice

`` instruiește browser-ul să descarce fontul cu prioritate înaltă, înainte ca CSS-ul să fie procesat. Aceasta reduce semnificativ FOIT și FOUT pentru fonturile utilizate above-the-fold.

Preloadeți doar 1-2 fonturi critice (fontul textului principal și cel al titlurilor, dacă diferă). Preloading-ul prea multor resurse concurează pentru bandwidth și poate reduce beneficiul per resursă.

Utilizați `fetchpriority=”high”` suplimentar pentru fontul cel mai critic (fontul body text) pentru a-i comunica browser-ului prioritatea maximă de descărcare față de alte fonturi preloadate.

Fonturile variabile

Fonturile variabile (variable fonts) conțin multiple „instanțe” (greutăți, lărgimi, stiluri) într-un singur fișier, în loc de fișiere separate per greutate. Un singur fișier variabil de 100KB înlocuiește 6 fișiere de 40KB fiecare (Regular, Italic, Bold, Bold Italic etc.).

Suportul pentru fonturile variabile este universal în browserele moderne (2018+). Dacă utilizați 3+ greutăți sau stiluri ale unui font, migrarea la varianta variabilă reduce numărul de request-uri și volumul total de date transferate.

Testarea și validarea optimizărilor

Google Google PageSpeed Insights și Lighthouse raportează explicit problemele de fonturi: „Ensure text remains visible during webfont load” și „Reduce the impact of third-party code”. Rezolvați aceste avevrtismente cu `font-display: swap` și preconnect pentru serviciile externe.

WebPageTest permite simularea conexiunilor lente și vizualizarea filmstrip-ului de încărcare, care arată exact când apare textul și dacă există CLS vizibil la swap-ul fontului. Aceasta este cea mai bună metodă de a evalua experiența reală a utilizatorilor pe conexiuni mobile.

Echipa Cisnet oferă servicii de optimizare SEO cu rezultate măsurabile. Explorați toate resursele din categoria Optimizare pentru tehnici și strategii practice.