Optimizacija web fontova: font-display, subsetting i self-hosting

Web fontovi izgledaju lepo, ali su skriveni krivac za spor i „skakutav" sajt. Prosečan font težine 30–100 KB blokira prikaz teksta dok se ne preuzme, a kada konačno stigne, često pomeri ceo raspored jer se razlikuje od rezervnog fonta. Rezultat su dve loše metrike: LCP (tekst kasni) i CLS (sadržaj skače). Dobra vest je da se sve to rešava sa nekoliko poteza.

Koristite WOFF2 i ništa stariji

WOFF2 je najkompresovaniji format i podržavaju ga svi moderni pregledači. U odnosu na stari TTF ili OTF, WOFF2 je 25–40% manji za isti font. Ako vaša tema još servira više formata radi „kompatibilnosti", slobodno ostavite samo WOFF2 — pregledači koji ga ne podržavaju praktično više ne postoje u prometu.

font-display: rešite FOIT i FOUT

Bez podešavanja, pregledač sakrije tekst dok se font učitava (FOIT — Flash of Invisible Text). To znači prazan prostor umesto sadržaja i do 3 sekunde. Svojstvo font-display u @font-face pravilu menja to ponašanje:

• swap — odmah prikaži rezervni font, pa ga zameni kada web font stigne. Tekst je uvek vidljiv; cena je mogući FOUT (kratka promena izgleda).
• optional — ako font ne stigne gotovo odmah, pregledač ostaje na rezervnom i ne pravi pomeranje. Odlično za CLS, po ceni da neki korisnici ne vide vaš font.
• fallback — kompromis između ta dva.

Za većinu sajtova swap je bezbedan izbor, a optional vredi razmotriti ako vam je CLS problem.

Subsetting: šaljite samo slova koja koristite

Kompletan font sadrži hiljade znakova — latinicu, ćirilicu, grčki, matematičke simbole. Ako vaš sajt koristi samo latinicu i naša slova (č, ć, š, ž, đ), nema razloga da korisnik preuzima ceo skup. Subsetting izbacuje nepotrebne znakove i lako prepolovi veličinu fajla. Alati poput glyphhanger ili fonttools to rade automatski, a Google Fonts nudi parametar &subset=latin-ext.

Self-hosting umesto Google Fonts CDN-a

Učitavanje fontova sa fonts.googleapis.com znači dodatnu vezu ka trećem domenu (DNS, TCP, TLS) pre nego što font uopšte krene da se preuzima. Ako font hostujete sa sopstvenog domena, štedite to vreme i dobijate kontrolu nad keširanjem. Uz brz hosting i CDN, self-hostovan WOFF2 stiže brže nego sa Google-ovog servera. Bonus: izbegavate slanje IP adrese posetioca trećoj strani, što pomaže i sa GDPR usklađenošću.

Preload za font iznad pregiba

Font koji koristi glavni naslov vredi preload-ovati: <link rel="preload" as="font" type="font/woff2" href="/fonts/naslov.woff2" crossorigin>. Tako pregledač počne da ga preuzima odmah, umesto da čeka da pročita CSS. Nemojte preload-ovati sve fontove — samo jedan ili dva koja se vide bez skrolovanja.

Uskladite rezervni font

CLS nastaje kada rezervni i web font imaju različitu širinu i visinu, pa se tekst „preslaguje". Svojstva size-adjust, ascent-override i descent-override u @font-face omogućavaju da rezervni sistemski font zauzme skoro isti prostor, pa je zamena gotovo neprimetna. Alat Fontaine ovo generiše automatski.

Česta pitanja

Koliko fontova je previše? Svaki font i svaka težina (regular, bold, italic) je poseban fajl. Držite se dva porodice fontova i najviše 3–4 težine. Sve preko toga usporava bez vidljive koristi.

Da li varijabilni fontovi pomažu? Da — jedan varijabilni font može zameniti više težina u jednom fajlu, što smanjuje broj zahteva. Isplati se ako zaista koristite više težina.

Na našim WordPress hosting paketima fontove servirate sa NVMe diska uz besplatan CDN, pa self-hosting radi punom brzinom. Pogledajte pakete i cene.