Web fontovi i dalje su najlakši dobitak za performanse na većini web-mjesta

Obrazac koji se stalno ponavlja

Ako danas analizirate deset nasumičnih produkcijskih web-mjesta, na većini ćete pronaći otprilike istu situaciju s fontovima:

• Šest do deset datoteka fontova učitanih na početnoj stranici
• Sve su u WOFF2 formatu (dobro), ali bez strategije font-display (loše)
• Nekoliko debljina i stilova koji se nigdje na stranici ne koriste
• Cijeli se skup poslužuje s domene treće strane (obično Google Fonts), uz sav DNS, TLS i trošak privatnosti koji to nosi
• Nema podskupova putem unicode-range, pa svaki posjetitelj preuzima ćirilične i grčke glifove čak i ako je stranica na engleskom

To nije problem svojstven samo malim web-mjestima. Mnogo dobro financiranih marketinških stranica i dalje učitava 600 KB fontova prije nego što se prvi odlomak uopće može iscrtati. Jednom kada počnete primjećivati taj obrazac, više ga ne možete ne vidjeti.

Popravak nije egzotičan. Riječ je o nekolicini dobro poznatih tehnika koje su u preglednicima već godinama.

Upotrijebite jedan promjenjivi font umjesto šest statičkih

Ako učitavate Inter Regular, Inter Medium, Inter SemiBold, Inter Bold i njihove kurzive, preuzimate otprilike šest puta više bajtova nego što vam treba. Jedan promjenjivi Inter font pokriva cijelu os debljine (i nagib, u nekim izdanjima) u jednoj datoteci koja je tek neznatno veća od dvije statičke debljine.

Podrška u preglednicima odavno je riješena — promjenjivi fontovi rade svugdje gdje je važno. Preostalo oklijevanje uglavnom je naslijeđena navika iz ere statičkih fontova.

Praktično pravilo: jedna datoteka promjenjivog fonta po pismu, po obitelji. Latinica u jednoj datoteci, ćirilica u drugoj, grčki u trećoj, učitano uvjetno pomoću unicode-range. To je sve.

Postavite razuman font-display

Zadano ponašanje dok se prilagođeni font još učitava jest prikazati ništa — nevidljiv tekst — do tri sekunde. To je najgore moguće zadano ponašanje. Korisnici vide praznu stranicu i pretpostave da je nešto pokvareno.

Dodajte ovo u svako pravilo @font-face:

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

swap odmah prikazuje rezervni font i zamjenjuje ga prilagođenim fontom kada se učita. Korisnik može čitati stranicu od nulte milisekunde. Kompromis je kratak pomak izgleda kada se zamjena dogodi, što ublažavate sljedećom tehnikom.

Uskladite metrike rezervnog fonta

Bljesak nestiliziranog teksta djeluje neugodno samo kada rezervni i prilagođeni font imaju vrlo različite metrike. Moderni CSS to rješava pomoću size-adjust, ascent-override i sličnih svojstava:

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

Kada su metrike rezervnog fonta podešene, zamjena je jedva primjetna — riječi zauzimaju isti vodoravni prostor prije i nakon što prilagođeni font stigne.

Googleov rad na --allow-fallback-font-metrics sada je dio osnovne podrške preglednika, a postoji i alatni tijek rada (biblioteka fontaine i slični alati) koji za vas u nekoliko sekundi izračunava prave vrijednosti.

Hostajte sami

Google Fonts je praktičan, besplatan i donosi dva stvarna troška:

1. Drugi TLS handshake. Čak i uz HTTP/3 i spajanje veza, dodatno ishodište rijetko je besplatno.
2. Pitanje privatnosti i usklađenosti. Nekoliko europskih sudova presudilo je da učitavanje Google Fonts s fonts.gstatic.com predstavlja prijenos osobnih podataka (IP adrese) trećoj strani. Samostalno hostanje potpuno uklanja to pitanje.

Tijek preuzimanja i hostanja je:

1. Nabavite WOFF2 datoteku (promjenjivo izdanje ako postoji)
2. Smanjite je na podskup pisama koja vaša publika stvarno koristi
3. Poslužujte je s istog ishodišta kao i ostatak web-mjesta, s dugim Cache-Control: max-age=31536000, immutable
4. Unaprijed učitajte najkritičniju debljinu: <link rel="preload" as="font" type="font/woff2" href="/fonts/inter-var.woff2" crossorigin>

To je cijeli tijek. Za postojeće web-mjesto traje jedno poslijepodne, a gotovo se nikada ne vraćate na staro.

Kada potpuno preskočiti prilagođene fontove

Vrijedi reći naglas: ne treba svakom web-mjestu prilagođeni font. Skup sistemskih fontova danas je doista lijep na svakom operacijskom sustavu:

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

Debljina je odgovarajuća, metrike su ispravne, iscrtavanje je prilagođeno uređaju, a trošak u bajtovima preko mreže točno je nula. Za alatno web-mjesto, internu aplikaciju, portfolio koji daje prednost sadržaju ili bilo što namijenjeno korisnicima na sporim mrežama, sistemski skup je ispravan odgovor.

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

💡 Isprobajte ovo: Pretvorite svoje TTF ili OTF datoteke u moderni WOFF2 s CSS-om spremnim za upotrebu pomoću Webfont Generator, što je promjena formata koju objava preporučuje.

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

Iskreni sažetak

Za tipično malo web-mjesto četiri koraka pokrivaju cijelu priču o performansama web fontova:

1. Jedan promjenjivi font po obitelji i po pismu
2. font-display: swap s usklađenim metrikama rezervnog fonta
3. Samostalno hostano s dugim cache zaglavljima i preload za kritičnu debljinu
4. Ili potpuno preskočite fontove i upotrijebite sistemski skup

Napravite to jednom i vratit ćete nekoliko stotina kilobajta s početne stranice, dobiti nekoliko stotina milisekundi percipiranih performansi i usput ukloniti ovisnost o trećoj strani. Malo promjena ima bolji omjer uloženog truda i dobiti.