Fonturile web sunt încă cel mai ușor câștig de performanță pe majoritatea site-urilor

Tiparul care apare mereu

Dacă auditezi astăzi zece site-uri de producție alese la întâmplare, vei găsi aproximativ aceeași situație a fonturilor pe majoritatea dintre ele:

• Șase până la zece fișiere de font încărcate pe pagina principală
• Toate în WOFF2 (bine), dar fără o strategie font-display (rău)
• Mai multe grosimi și stiluri care nu sunt folosite nicăieri pe pagină
• Întregul stack servit de pe un domeniu terț (Google Fonts, de obicei), cu tot costul DNS, TLS și de confidențialitate pe care îl implică
• Fără subsetare prin unicode-range, astfel încât fiecare vizitator descarcă glifele chirilice și grecești chiar dacă pagina este în engleză

Aceasta nu este o problemă specifică site-urilor mici. Multe pagini de marketing bine finanțate încă încarcă 600 KB de fonturi înainte ca primul paragraf să poată fi afișat. Odată ce începi să observi tiparul, nu îl mai poți ignora.

Remedierea nu este exotică. Este vorba despre câteva tehnici bine înțelese, care există în browsere de ani de zile.

Folosește un singur font variabil în loc de șase statice

Dacă încarci Inter Regular, Inter Medium, Inter SemiBold, Inter Bold și variantele lor italice, descarci aproximativ de șase ori mai mulți octeți decât ai nevoie. Un singur font variabil Inter acoperă întreaga axă de grosime (și înclinarea, în unele build-uri) într-un fișier care este abia mai mare decât două grosimi statice.

Povestea suportului în browsere este clarificată de ani buni — fonturile variabile funcționează peste tot unde contează. Ezitarea rămasă este în mare parte memorie musculară moștenită din era fonturilor statice.

O regulă practică: un fișier de font variabil per script, per familie. Latin într-un fișier, chirilic în altul, grecesc într-un al treilea, încărcate condițional cu unicode-range. Atât.

Setează un font-display rezonabil

Comportamentul implicit atunci când un font personalizat încă se încarcă este să nu afișeze nimic — text invizibil — timp de până la trei secunde. Este cel mai prost default posibil. Utilizatorii văd o pagină goală și presupun că ceva este stricat.

Adaugă asta la fiecare regulă @font-face:

@font-face {
  font-family: 'Inter';
  src: url('/fonts/inter-var.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-display: swap;
}

swap afișează imediat fontul fallback și înlocuiește cu fontul personalizat când acesta se încarcă. Utilizatorul poate citi pagina din milisecunda zero. Compromisul este o scurtă deplasare a layoutului când are loc schimbarea, pe care o atenuezi cu tehnica următoare.

Potrivește metricele fontului fallback

Un flash de text nestilizat se simte deranjant doar atunci când fontul fallback și fontul personalizat au metrice foarte diferite. CSS modern rezolvă asta cu size-adjust, ascent-override și altele:

@font-face {
  font-family: 'Inter Fallback';
  src: local('Arial');
  size-adjust: 107%;
  ascent-override: 90%;
  descent-override: 22%;
  line-gap-override: 0%;
}

Cu metricele fallback ajustate, schimbarea este abia perceptibilă — cuvintele ocupă același spațiu orizontal înainte și după ce sosește fontul personalizat.

Munca Google la --allow-fallback-font-metrics este acum suport de bază în browsere, iar există un pipeline de tooling (biblioteca fontaine și altele similare) care calculează valorile corecte pentru tine în câteva secunde.

Self-host

Google Fonts este convenabil, gratuit și aduce două costuri reale:

1. Un al doilea handshake TLS. Chiar și cu HTTP/3 și connection coalescing, o origine suplimentară rareori este gratuită.
2. O întrebare de confidențialitate și conformitate. Mai multe instanțe europene au decis că încărcarea Google Fonts de la fonts.gstatic.com constituie transmiterea de date personale (adresa IP) către un terț. Self-hosting elimină complet întrebarea.

Pipeline-ul de descărcare și găzduire este:

1. Obține fișierul WOFF2 (build variabil dacă există)
2. Subsetează-l la scripturile pe care publicul tău le folosește efectiv
3. Servește-l de pe aceeași origine ca restul site-ului, cu un Cache-Control: max-age=31536000, immutable lung
4. Preîncarcă grosimea cea mai critică: <link rel="preload" as="font" type="font/woff2" href="/fonts/inter-var.woff2" crossorigin>

Acesta este întregul pipeline. Durează o după-amiază pentru un site existent și aproape niciodată nu revii la vechea abordare.

Când să sari complet peste fonturile personalizate

Merită spus explicit: nu orice site are nevoie de un font personalizat. Stack-ul de fonturi de sistem este acum cu adevărat frumos pe fiecare sistem de operare:

font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Inter, sans-serif;

Grosimea este corectă, metricele sunt corecte, randarea este optimizată pentru dispozitiv, iar costul în octeți transferați este exact zero. Pentru un site de instrumente, o aplicație internă, un portofoliu care prioritizează conținutul sau orice se adresează utilizatorilor de pe rețele lente, stack-ul de sistem este răspunsul corect.

<!-- tool-cta:start -->

💡 Încearcă asta: Convertește fișierele tale TTF sau OTF în WOFF2 modern cu CSS gata de utilizare folosind Webfont Generator, care este schimbarea de format recomandată de articol.

<!-- tool-cta:end -->

Rezumatul sincer

Pentru un site mic tipic, patru pași acoperă întreaga poveste a performanței fonturilor web:

1. Un font variabil per familie per script
2. font-display: swap cu metrice fallback potrivite
3. Self-hosted cu headere de cache lungi și un preload pentru grosimea critică
4. Sau sari complet peste fonturi și folosește stack-ul de sistem

Fă asta o singură dată și recuperezi câteva sute de kilobyți de pe pagina principală, câștigi câteva sute de milisecunde de performanță percepută și elimini pe parcurs o dependență de un terț. Puține schimbări au un raport mai bun între efort și rezultat.