Fonturi web și viteza site-ului: cât costă fiecare font în plus

Cele mai multe site-uri își încarcă fonturile de pe internet: Web Almanac 2024 a găsit fonturi web pe aproximativ 87% dintre site-uri. Fiecare e un fișier pe care browserul trebuie să-l găsească, să-l descarce și să-l aplice înainte ca textul să arate cum a vrut designerul, iar până ajunge, browserul fie ascunde textul, fie îl afișează cu alt font. Cât costă asta depinde de câte fonturi folosești și de cum le încarci, iar cele mai multe sfaturi pe tema asta sunt fie reguli empirice, fie un singur test. Așa că am măsurat. Am construit o pagină și am încărcat-o doar cu fonturi de sistem, apoi cu una, două, trei, patru și cinci familii de fonturi web, și apoi cu două familii încărcate în patru moduri diferite: cu preload, cu font-display: block, cu optional și direct de la Google Fonts. Fiecare variantă a fost încărcată de 12 ori, în ordine amestecată, pe un telefon de gamă medie emulat, printr-o conexiune 4G lentă. Ghidul ăsta prezintă rezultatele, explică fiecare mod de încărcare și se încheie cu întrebarea câte fonturi ar trebui să folosească de fapt un site.

Cât costă fonturile web în testul nostru (mediana a 12 încărcări, telefon emulat pe 4G lent)

Testul nostru, 10 octombrie 2026: o singură pagină, Chrome cu emulare de telefon, 150 ms dus-întors, 1,6 Mbps descărcare, procesor încetinit de 4 ori, cache dezactivat, 12 încărcări pe rând în ordine amestecată. „Textul principal vizibil” este Largest Contentful Paint; „Toate fonturile la locul lor” e momentul în care s-a terminat de descărcat ultimul fișier de font; deplasarea de layout e cea mai mare dintre cele 12 rulări, iar pragul Google pentru „bun” e 0,1. Rândurile găzduite pe propriul server au folosit font-display: swap, dacă nu e menționat altfel. Cu optional, browserul a folosit fonturile doar dacă erau gata aproape imediat; pe conexiunea asta nu au fost, așa că prima afișare a păstrat fontul de rezervă.

Cum ajunge un font web pe ecran

Un font web nu face parte din pagină. Browserul descarcă întâi HTML-ul, apoi CSS-ul și abia după ce își dă seama ce text are nevoie de ce font cere fișierele de font. Asta face din fonturi unele dintre ultimele resurse care încep să se descarce, iar textul pe care îl stilizează e de obicei cel mai important lucru din pagină.

Cât timp fișierul e pe drum, browserul are două variante: ascunde textul și așteaptă, sau îl afișează cu un font de rezervă și îl schimbă când ajunge fontul web. Proprietatea CSS font-display decide care, și e cea mai importantă linie din orice configurare de fonturi. Textul ascuns se numește „flash of invisible text”; textul care își schimbă fontul în timp ce îl citești e „flash of unstyled text”, iar dacă cele două fonturi ocupă spații diferite, pagina sare.

Cât costă fiecare font în plus: măsurătoarea noastră

Cu font-display: swap, fonturile în plus nu au întârziat momentul în care apare textul, ci momentul în care pagina nu se mai schimbă. Textul principal a fost vizibil după 0,54–0,58 secunde în toate variantele, de la fonturi de sistem la cinci familii, pentru că browserul l-a desenat imediat cu fontul de rezervă. Ce a crescut a fost timpul până la sosirea tuturor fonturilor web: 0,63 secunde cu o familie, 0,85 cu două, 1,06 cu trei, 1,22 cu patru și 1,74 cu cinci.

Mărimea a contat mai mult decât numărul. Fiecare familie după prima a adăugat cam 0,2 secunde, până la a cincea, Merriweather, de 95 KB și de două ori mai mare decât orice altă familie din test, care a adăugat singură o jumătate de secundă. Datele de font au crescut de la 42 KB cu o familie la 260 KB cu cinci, pe o pagină al cărei HTML și CSS cântăreau 3 KB.

Stabilitatea layoutului a fost celălalt cost. Până la trei familii, schimbarea fontului n-a mișcat nimic măsurabil. Cu patru și cinci, cea mai proastă rulare a ajuns la o deplasare de layout de 0,097, chiar sub pragul de 0,1 pe care Google îl consideră bun în Core Web Vitals. Asta e chiar schimbarea fontului: text de rezervă care se rearanjează când îl înlocuiește un font cu alte proporții.

font-display: block, swap, fallback și optional

Există cinci valori. Cu block, browserul ascunde textul o perioadă scurtă, recomandat cam trei secunde, apoi îl afișează cu fontul de rezervă până ajunge fontul. Cu swap, afișează imediat fontul de rezervă și îl schimbă oricând ajunge fontul, oricât de târziu. Cu fallback, ascunde textul o clipă, cel mult aproximativ 100 de milisecunde, apoi afișează fontul de rezervă și îl schimbă doar dacă fontul ajunge în câteva secunde. Cu optional, așteaptă aceeași clipă și apoi păstrează ce are: dacă fontul nu e gata, rămâne fontul de rezervă la afișarea asta, iar fontul descărcat e folosit la următoarea. A cincea valoare, auto, lasă alegerea browserului.

Testul nostru arată compromisul în cifre. Cu block, textul principal a devenit vizibil la 0,93 secunde în loc de 0,57, cam 360 de milisecunde de spațiu gol acolo unde ar trebui să fie titlul. Cu optional, textul a apărut la fel de repede ca la swap și nu s-a mișcat nimic, dar pe conexiunea noastră lentă prima afișare n-a arătat deloc fonturile web.

Pentru cele mai multe site-uri, swap e alegerea implicită corectă pentru textul de conținut, împreună cu un font de rezervă bine potrivit, ca schimbarea să nu miște pagina. Optional e alegerea mai bună când fontul e un plus și stabilitatea contează mai mult, iar block nu are ce căuta lângă textul de conținut. Web Almanac a găsit swap pe 45% dintre paginile mobile și block pe 23%, deci aproape un sfert din web își ascunde încă textul cât se încarcă fonturile.

Google Fonts sau fonturi găzduite pe propriul server?

Încărcarea acelorași două fonturi de la Google Fonts în loc de propriul server a făcut ca textul principal să apară cu 0,32 secunde mai târziu, la 0,89 secunde în loc de 0,57. Fișierele de font aveau aceeași mărime. Diferența e drumul: pagina descarcă întâi o foaie de stil de la fonts.googleapis.com, care blochează afișarea, apoi fișierele de font de pe un al doilea domeniu, fonts.gstatic.com, așa că browserul trebuie să deschidă două conexiuni în plus înainte să ajungă vreo literă din fontul web.

Vechiul argument pentru Google Fonts era cache-ul: un vizitator care văzuse deja Roboto pe alt site îl avea pregătit. Asta s-a terminat în 2020, cu Chrome 86, când Chrome a început să-și separe cache-ul pe site-uri, cum făcea deja Safari; un font descărcat pentru un site nu mai e refolosit de altul. Fiecare site își plătește oricum propriile fonturi.

În UE există și un motiv juridic. În ianuarie 2022, Tribunalul Regional din München a obligat proprietarul unui site să-i plătească unui vizitator 100€ despăgubiri, pentru că site-ul încărca Google Fonts de pe serverele Google și transmitea astfel adresa IP a vizitatorului către Google fără consimțământ. Instanța a reținut că fonturile pot fi folosite fără acest transfer, găzduindu-le pe propriul server. Hotărârea a declanșat în Germania un val de somații, iar găzduirea proprie elimină complet problema. Licențele Google Fonts o permit: descarci fișierele, le pui pe serverul tău și le referi din CSS.

Preload: când ajută și când nu

Un indiciu preload îi spune browserului să descarce un font înainte să descopere că are nevoie de el. Ajută când fonturile sunt descoperite târziu, de obicei când sunt menționate într-o foaie de stil externă, care trebuie ea însăși descărcată și citită mai întâi. În cazul ăsta, un preload poate economisi un drum dus-întors complet.

Nu ajută când browserul găsește oricum fonturile devreme și poate chiar să strice. În testul nostru, regulile pentru fonturi erau chiar în pagină, așa că browserul le-a găsit imediat. Preload-ul pentru ambele familii a adus fonturile cu doar 0,05 secunde mai devreme și a împins prima afișare de la 0,57 la 0,74 secunde. Fă preload la unul sau două fișiere folosite în primul ecran și menționate într-o foaie de stil externă, nu la fiecare grosime pe care o ai. Web Almanac a găsit preload pentru fonturi pe 11% dintre pagini. Au nevoie de atributul crossorigin chiar și pe propriul domeniu, altfel browserul descarcă fișierul de două ori.

Fă fiecare fișier mai mic: WOFF2, subseturi și fonturi variabile

Folosește WOFF2, formatul comprimat pe care îl suportă orice browser actual; Web Almanac l-a găsit pe 78% dintre site-urile mobile. Apoi fă subseturi: un font care acoperă latină, chirilică, greacă și vietnameză conține mii de caractere pe care o pagină în română sau engleză nu le folosește niciodată. Google Fonts împarte deja familiile pe sisteme de scriere, cu descriptorul unicode-range, așa că browserul descarcă doar părțile de care are nevoie pagina.

Fonturile variabile sunt cealaltă mare economie. Un font variabil conține toate grosimile într-un singur fișier, iar Google Fonts servește acum așa ceva pentru multe familii: în testul nostru, varianta normală și cea bold de Roboto, și la fel pentru toate cele cinci familii, au venit fiecare dintr-un singur fișier. Un fișier de 42 KB a înlocuit ce era odinioară câte un fișier pe grosime. Web Almanac a găsit fonturi variabile pe aproximativ o treime dintre pagini.

Propriul nostru site e un exemplu concret. Google ne servea fontul, Inter, în două fișiere: unul latin de 47 KB și unul pentru latina extinsă de 83 KB, al doilea descărcat pe fiecare pagină din cauza a șase litere românești. Am construit un singur subset care conține latina plus exact caracterele extinse pe care le folosim: 55 KB într-un fișier, găzduit pe propriul server și încărcat cu preload. Fiecare pagină are acum 55 KB de font în loc de 131 KB.

Folosirea fonturilor aflate deja pe dispozitivul vizitatorului

Cel mai rapid font web e cel pe care nu-l descarci. Fiecare sistem de operare vine cu un font de interfață bine proiectat: Segoe UI pe Windows, San Francisco pe dispozitivele Apple, Roboto pe Android. Familia generică CSS system-ui cere exact asta, fără să numească vreunul dintre ele; specificația CSS o descrie ca fontul implicit al interfeței platformei, menit să lase o pagină „să se integreze în aspectul sistemului de operare nativ”. O declarație obișnuită este font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif, unde fonturile numite sunt rezerve pentru browserele mai vechi.

Avantajele sunt exact costurile din tabelul nostru, eliminate. Niciun fișier de font, deci nimic de descărcat și nicio cerere în plus. Nicio schimbare de font, deci nicio deplasare de layout și niciun text care își schimbă aspectul. Textul apare la prima afișare, într-un font pe care dispozitivul îl redă bine, pentru că a fost proiectat pentru ecranul acela. Varianta noastră cu fonturi de sistem a avut 0 KB de fonturi pe o pagină de 3 KB.

Prețul e controlul. Pagina arată ușor diferit pe Windows, pe un Mac și pe un telefon, iar tu nu poți folosi un font ca parte a brandului. De aceea fonturile de sistem sunt ideale pentru textul de conținut, panourile de administrare, dashboarduri și aplicații, și o alegere rezonabilă pentru textul de conținut chiar și când titlurile folosesc un font de brand. Sunt versiunea modernă a „fonturilor sigure pentru web”, ca Arial și Georgia, cu diferența că system-ui se adaptează fiecărui dispozitiv în loc să impună același font tuturor.

Cum oprești schimbarea fontului din a mișca pagina

Deplasarea de layout din rulările cu patru și cinci familii a venit de la textul de rezervă, care ocupa alt spațiu decât fontul web. CSS rezolvă asta cu patru descriptori într-un @font-face pentru fontul de rezervă: size-adjust îi scalează literele, iar ascent-override, descent-override și line-gap-override îi potrivesc înălțimea rândului. Setează-i astfel încât, de exemplu, Arial să ocupe același spațiu ca fontul tău web, iar schimbarea va modifica aspectul literelor fără să miște nimic.

Exact asta face propriul nostru site: @font-face-ul nostru pentru „Inter Fallback” trimite la Arialul aflat deja pe dispozitiv și setează size-adjust la 107,89%, ascent la 89,79% și descent la 22,36%, valori derivate din metricile lui Inter. Frameworkurile pot genera aceste valori pentru tine și merită folosite ori de câte ori folosești swap.

Câte fonturi ar trebui să folosească un site?

Pentru cele mai multe site-uri, răspunsul e o singură familie de fonturi web, cel mult două, iar fiecare familie în plus costă mai mult decât aduce. În testul nostru, fiecare familie după prima a adăugat aproximativ 0,2 secunde până când pagina s-a așezat, iar de la patru familii în sus deplasarea de layout s-a apropiat de limita Google. O singură familie variabilă acoperă titluri, text și butoane în toate grosimile de care ai nevoie.

Dacă vrei o a doua familie pentru titluri, alege un font variabil, fă-i un subset și încarcă-l cu swap și un font de rezervă potrivit, sau cu optional dacă e decorativ. Găzduiește-le pe amândouă pe propriul server. Gândește-te la fonturi de sistem pentru text și păstrează fontul de brand doar pentru titluri. Și măsoară-ți propriile pagini în loc să te bazezi pe un singur scor: cum obții 100 în PageSpeed explică ce poate și ce nu poate spune o singură rulare Lighthouse, iar ce face serverul tău cu PageSpeed tratează compresia și cache-ul, care se aplică și fișierelor de font.

Dacă site-ul tău are mai multe fonturi decât îi trebuie, un Audit tehnic măsoară cât costă fiecare pe paginile tale reale și îți dă ordinea în care să le rezolvi.

Surse și metodă

Testul nostru a rulat pe 10 octombrie 2026: o pagină HTML cu cinci roluri tipografice (text, titluri, navigare, citat, subsol), fiecare familie în plus preluând un rol. Fișierele de font au fost subseturile latine pe care Google Fonts le-a servit în ziua aceea unui Chrome actual, găzduite pe un server local, dacă nu e menționat altfel. Chrome cu emulare de telefon (412×823), 150 ms dus-întors, 1,6 Mbps descărcare, 750 Kbps încărcare, procesor încetinit de 4 ori, cache dezactivat; 10 variante × 12 încărcări, în ordine amestecată la fiecare rundă; sunt raportate medianele.

• HTTP Archive — Web Almanac 2024, Fonts ↗

  Fonturi web pe aproximativ 87% dintre site-uri; font-display swap pe 45% și block pe 23% dintre paginile mobile; preload pentru fonturi pe 11% dintre pagini; fonturi variabile pe aproximativ o treime; WOFF2 pe 78% dintre site-urile mobile; Google Fonts pe 48% dintre site-urile mobile.

• MDN — font-display ↗

  Definițiile valorilor auto, block, swap, fallback și optional, prin perioadele de blocare și de schimbare.

• Chrome for Developers — Controlling font performance with font-display ↗

  Durate recomandate: o perioadă scurtă de blocare de 3 secunde pentru block, una extrem de scurtă, de 100 ms sau mai puțin, pentru fallback și optional, și o perioadă scurtă de schimbare de 3 secunde pentru fallback.

• W3C — CSS Fonts Module Level 4, system-ui ↗

  system-ui afișează textul cu fontul implicit al interfeței platformei, ca un conținut web să se integreze în aspectul sistemului de operare nativ.

• web.dev — CSS size-adjust for @font-face ↗

  Cum size-adjust și suprascrierile pentru ascent, descent și line-gap potrivesc un font de rezervă cu un font web, ca schimbarea să nu deplaseze layoutul.

• Chrome for Developers — Gaining security and privacy by partitioning the cache ↗

  Din Chrome 86, cache-ul HTTP e separat după site și URL, așa că o resursă salvată pentru un site nu e refolosită de altul.

• IHK — LG München I, hotărârea din 20 ianuarie 2022, 3 O 17493/20 ↗

  Tribunalul Regional München I a acordat 100€ despăgubiri în temeiul art. 82 GDPR pentru transmiterea adresei IP a unui vizitator către Google prin încărcarea Google Fonts de pe serverele Google, fără consimțământ.