Web fontovi: izbor, srpska slova i brzina učitavanja

Font daje sajtu karakter, ali je i fajl koji pregledač mora da preuzme pre nego što prikaže tekst onako kako je dizajner zamislio. Lep font bez slova đ ili ć, ili pet težina koje se učitavaju na svakoj stranici, pravi štetu koju posetilac odmah vidi. U ovom tekstu objašnjavamo sve što je važno za temu web fontovi: izbor i brzina: kako proveriti podršku za srpsku latinicu i ćirilicu, da li fontove hostovati sami ili preko Google Fonts servisa i kako podesiti učitavanje da tekst ne kasni.

Podrška za srpska slova: prvo što proveravate

Mnogi fontovi imaju samo osnovni latinični skup znakova. Ako u njemu nema slova č, ć, š, ž i đ, pregledač ta slova prikazuje rezervnim fontom, pa reč „Đurđevdan“ izgleda kao da je složena od dva različita pisma. Proverite pre nego što se zaljubite u font:

• Latinica: font mora da podržava proširenu latinicu, koja se na Google Fonts servisu zove latin-ext. Napišite probnu rečenicu sa svim slovima: „Ćelavi Đorđe žuri, čovek šapuće“.
• Ćirilica: ako je sajt na ćirilici ili ima ćiriličnu verziju, font mora imati i ćirilični skup (cyrillic). Ponuda takvih fontova je osetno manja.
• Srpski oblici slova: nekoliko ćiriličnih slova, posebno malo b, g, d, p i t u kurzivu, u srpskom se pišu drugačije nego u ruskom. Kvalitetni fontovi imaju lokalizovane oblike koji se aktiviraju kada stranica ima oznaku jezika lang="sr", ali ne podržavaju ih svi fontovi i treba ih proveriti na stvarnom tekstu.
• Sve težine i kurziv: podrška u regularnoj težini ne znači da je ima i podebljana ili kurzivna verzija.

O izboru pisma za sajt više u tekstu sajt na ćirilici ili latinici, a o kombinovanju fontova sa bojama u tekstu boje i tipografija na sajtu.

Google Fonts ili sopstveni hosting

Nekada se tvrdilo da je Google Fonts brži jer posetilac font već ima u kešu sa drugog sajta. To odavno ne važi: savremeni pregledači keš dele po sajtu, pa ta prednost ne postoji. Pored toga, u nekim evropskim sudskim slučajevima učitavanje Google Fonts sa Google servera bez saglasnosti ocenjeno je kao nedozvoljen prenos IP adrese. Zato danas za većinu sajtova preporučujemo sopstveni hosting. Licence većine fontova sa Google Fonts servisa (najčešće SIL Open Font License) to dozvoljavaju, ali za komercijalne fontove uvek proverite licencu za web upotrebu. Pravni okvir za podatke posetilaca objasnili smo u tekstu o kolačićima i zaštiti podataka.

Koliko težina i fajlova je dovoljno

Svaka težina i svaki kurziv je poseban fajl. Tipičan sajt ima dovoljno sa:

• jednim fontom za tekst u regularnoj i podebljanoj težini;
• eventualno drugim fontom za naslove, u jednoj težini;
• kurzivom samo ako se zaista koristi u tekstovima.

To su tri do četiri fajla. Ako vam treba mnogo težina, razmotrite varijabilni font: jedan fajl sadrži ceo raspon težina, pa je isplativiji od četiri ili više zasebnih fajlova. Kod jedne ili dve težine klasični fajlovi su obično manji.

Koristite isključivo format WOFF2, koji podržavaju svi savremeni pregledači i koji je bolje kompresovan od starijih formata. Ako sajt koristi samo latinicu, ne učitavajte ćirilični podskup; pravilo unicode-range omogućava da pregledač preuzme samo deo fonta koji je stvarno potreban za tekst na stranici.

font-display i preload: kako tekst da ne kasni

Dok se font preuzima, pregledač mora da odluči šta da prikaže. Bez podešavanja, tekst može ostati nevidljiv do nekoliko sekundi. Svojstvo font-display: swap govori pregledaču da odmah prikaže tekst rezervnim fontom, pa ga zameni kada se web font učita:

@font-face {
  font-family: "Inter";
  src: url("/fontovi/inter-latin-ext-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

Font koji se koristi iznad pregiba, na primer za glavni naslov i prvi pasus, možete unapred najaviti oznakom preload u zaglavlju stranice. Atribut crossorigin je obavezan i za fontove sa istog domena, inače će se fajl preuzeti dva puta:

<link rel="preload" href="/fontovi/inter-latin-ext-400.woff2" as="font" type="font/woff2" crossorigin>

Preload koristite štedljivo, za jedan ili dva fajla. Ako unapred najavite sve fontove, oni se takmiče sa slikama i stilovima koji su važniji za prvi prikaz.

Pomeranje sadržaja pri zameni fonta

Kada se rezervni font zameni web fontom, tekst može promeniti širinu i visinu, pa se sadržaj ispod njega pomeri. To se meri kao CLS, jedna od metrika koje smo objasnili u tekstu o Core Web Vitals metrikama. Pomeranje se smanjuje na nekoliko načina:

1. izaberite rezervni sistemski font sličnih proporcija (na primer Arial za većinu modernih sans-serif fontova);
2. za rezervni font podesite size-adjust i srodna svojstva u @font-face pravilu, tako da zauzima približno isti prostor kao web font;
3. preload-ujte font koji se koristi u prvom ekranu, kako bi zamena nastala pre nego što posetilac počne da čita.

Brza provera vaših fontova

• U alatima za programere pregledača, na kartici Network, filtrirajte prikaz na fontove i prebrojte fajlove i njihovu veličinu.
• Proverite da li se fontovi učitavaju sa spoljnih domena i da li neki dodatak ili tema učitava font koji se nigde ne koristi.
• Napišite probnu rečenicu sa svim srpskim slovima u svim težinama koje sajt koristi.
• U PageSpeed Insights potražite preporuke vezane za font-display i blokiranje prikaza.

Ako sajt učitava previše fontova ili srpska slova izgledaju neujednačeno, pošaljite nam upit i podesićemo tipografiju tako da bude i lepa i brza.