Ako použiť webfonty a nespomaliť si web?

Webové fonty sú čoraz obľúbenejšie, umožňujú realizovať návrh grafiky na webe vrátane typografie. Aké je však vhodné riešenie načítavania webfontov? Možností, ako použiť webfonty, je viacero a ja sa vám tie najdôležitejšie a najlepšie pokúsim priblížiť.

Problémy FOIT vs FOFT

Stále viac ľudí používa na surfovanie po webe mobilné zariadenia, často iba pomocou slabého mobilného internetu. Načítanie stránky môže trvať aj niekoľko desiatok sekúnd. V tejto situácii prichádzajú na scénu spomenuté slová z nadpisu.

Pri FOIT (Flash of Invisible Text) musí používateľ čakať, kým sa stiahnu všetky potrebné fonty. Počas tejto doby vidí iba text, ktorý má štandardné (systémové) fonty. Má teda iba dve možnosti: počkať alebo odísť. Druhá možnosť je negatívom pre vás, aj používateľa.

Na nasledujúcom obrázku môžete vidieť problém postupného načítavania textu. Najprv vidíme iba text, ktorý nemá nastavené webfonty, a až potom zvyšný text.

Na druhej strane pri FOFT (Flash of Faux Text) sa zobrazí text s predvolenými fontmi a po stiahnutí vlastných fontov sa text iba upraví. Návštevník vášho webu je tak schopný prečítať si krátky text a urobiť si obraz o webe aj počas načítavania webfontu.

Príklad opäť na  nasledujúcom obrázku. Text vidíme hneď, ako sa načíta, a font sa zmení po načítaní.

Dôležité vlastnosti optimálneho riešenia

V nasledujúcom zozname nájdete výpis dôležitých kritérií načítania webfontov. Keďže nie je možné splniť všetky spomenuté položky, zameriam sa na tie najdôležitejšie z hľadiska používateľského zážitku (UX).

• Jednoduchá implementácia – Jednoduchá implementácia pre programátora nemusí vždy znamenať optimálne riešenie.
• Rýchlosť načítania – Počas načítavania našich fontov pri FOFT zatiaľ vidíme texty v predvolených fontoch, a tak rýchlosť načítania webfontu nie je taká podstatná. Ak používame riešenie FOIT, rýchlosť je pre nás podstatne dôležitejšia.
• Škálovateľnosť – Ak potrebujeme použiť väčší počet fontov, súbory sa načítavajú naraz paralelne alebo jeden po druhom? Výhodnejšie je paralelné načítanie.
• Budúcnosť – Ak použijeme nové formáty fontov, bude naše riešenie stále fungovať aj o pár rokov alebo ho budeme musieť opravovať?
• Podpora – Zobrazenie fontov naším prístupom je pre všetky najpoužívanejšie prehliadače bezproblémové?
• Flexibilita – Máme kontrolu nad načítavaním fontov? Niektoré fonty sú pre nás dôležitejšie, používame ich častejšie ako iné a chceme ich teda prioritizovať.
• Robustnosť – Čo sa stane, ak dané riešenie zlyhá a náš font sa nenačíta? Budeme stále schopní čítať text alebo bude text neviditeľný a používateľ s nechuťou odíde z našej stránky?
• Podmnožiny – Vieme nastaviť, ktoré znakové súbory chceme používať? Chceme predsa načítať len znaky, ktoré sa v našej abecede a na našom webe vyskytujú.

Web bez webfontov

Aj toto je riešenie. Nemusíme nad ničím rozmýšľať a skúmať možné prístupy. Toto riešenie však v roku 2016 uspokojí len málokoho. Chceme mať možnosť zobraziť text, ktorý zapadne do dizajnu a dobre sa číta.

[code]body {
font-family: sans-serif;
}[/code]

Jednoduché riešenie, ale len niektoré fonty sú bezproblémové a vyzerajú rovnako na všetkých systémoch. Overiť dostupnosť bežných systémových fontov môžete na webe fontfamily.io. Ak ste našli červené polia, budete chcieť použiť jeden z ďalších prístupov.

Jednoduchý font-face

Jednoduchý prístup, ktorý odporúča Google pre google fonty.

[code]@font-face {
font-family: Lato;
src: url(‚/web/css/fonts/lato/lato-italic-webfont.woff2‘) format(‚woff2‘),
url(‚/web/css/fonts/lato/lato-italic-webfont.woff‘) format(‚woff‘);
font-weight: 400;
font-style: italic;
}[/code]

Je to jeden z najpoužívanejších prístupov. Ak začneme používať nový formát fontov, stačí, ak pridáme ďalší riadok do CSS. V niektorých prehliadačoch ako Firefox, Google Chrome však nevidíme text (problém FOIT). Až po troch sekundách sa aktivuje FOFT. Tri sekundy môžu znamenať odchod používateľa. V prehliadači Safari navyše nie je nastavená maximálna čakacia doba, teda text nemusíme vidieť dlhšie. Fonty sa načítavajú postupne a každý má vlastný časovač, čo znamená, že nám môže text nabiehať postupne v priebehu niekoľkých sekúnd. Ak používate jeden font, tento prístup môže byť pre vás vhodný. Ak však potrebujete použiť viacero fontov, budete potrebovať niečo lepšie.

Font-display

Jednoduché riešenie, pri ktorom do @font-face pridáme iba font-display: swap. Týmto riadkom iba prikážeme použiť metódu FOFT, ak ju prehliadač podporuje.

[code]@font-face {
font-family: Lato;
src: url(‚/web/css/fonts/lato/lato-italic-webfont.woff2‘) format(‚woff2‘),
url(‚/web/css/fonts/lato/lato-italic-webfont.woff‘) format(‚woff‘);
font-weight: 400;
font-style: italic;
font-display: swap;
}[/code]

Vyriešili sme jeden z problémov pri použití font-face? Žiaľ nie, aktuálne font-display: swap žiadna stabilná verzia prehliadačov nepodporuje. Kým sa podpora prehliadačov rozšíri, je pre nás tento spôsob nepoužiteľný.

Preload

Preload je rozšírením predchádzajúcich riešení. Do hlavičky pridáme element link s rel=“preload“.

[code]<link rel=“preload“ href=“/web/css/fonts/lato/lato-regular-webfont.woff2″ as=“font“ type=“font/woff2″ crossorigin=““>[/code]

Tento prístup je pomerne nový. Podporujú ho zatiaľ prehliadače Google Chrome (od mája 2016) a Opera. Podporu prehliadačov si môžete pozrieť na webe caniuse.com. Pridáva nám možnosť určiť, ktorý súbor je pre nás potrebný. Tento atribút použijeme iba pre tie najdôležitejšie (kritické) fonty. Nevyriešili sme však úplne problém s FOIT, iba sme ho zaplátali a aj to iba v niektorých prehliadačoch. Je to však lepší prístup ako jednoduchý font-face.

Inline Data URI

Celý kód fontu vložiť namiesto URL? V tomto prístupe práve toto spravíme.

[code]@font-face {
font-family: Lato;
src: url(‚data:application/x-font-woff;charset=utf-8;base64,d09GRgABAAAAAHyoABMAAAAA4XQAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAABqAAAABwAAAAcbEaAkkdERUYAAAHEAAAAIgAAACQBGwHRR1BPUwAAAegAAAqmAA……..
}[/code]

V čom je tento spôsob iný ako jednoduchý font-face? Každá jedna referencia na súbor vytvára HTTP požiadavku, ktorá predlžuje kompletné stiahnutie stránky. Používateľ teda dlhšie vidí iba bielu stránku. Odstránili sme problém s FOIT/FOFT, keďže font sa načítava spolu s CSS.

Týmto spôsobom vieme načítať iba jeden formát, pri predchádzajúcich prístupoch sme mohli linkovať viacero formátov jednoduchým oddelením pomocou čiarok. Túto metódu použite iba v prípade, že nechcete zaznamenať FOIT/FOFT.

Asynchronous Data URI Stylesheet

Rozšírenie predchádzajúceho spôsobu pomocou javascriptovej knižnice loadCSS. Inline Data URI vložíme do samostatného CSS, a to v JS zavoláme pomocou:

[code]loadCSS( „async-data-uri.css“ );[/code]

Okrem toho potrebujeme mať v hlavičke nalinkované toto CSS:

[code]<link rel=“stylesheet“ href=“async-data-uri.css“ media=“all“>[/code]

Ak spadne načítanie našich fontov, neobmedzí to celé CSS. Najprv načítame text s predvoleným  fontom pomocou a následne po stiahnutí nášho fontu ho zmeníme. Ide teda o použitie metódy FOFT. Jeden z hlavných problémov je zlá robustnosť. Tak ako v predchádzajúcom spôsobe, nevieme nalinkovať viacero formátov fontov. Môžeme pomocou loadCSS nalinkovať viacero formátov, ale len čo sa načíta zlý formát, prehliadač použije default font. Jediné riešenie je v Javascripte sa rozhodnúť, ktorý formát použijeme. Ak použijeme nový formát, musíme zmeniť náš Javascript.

FOFT with a Class

Vylepšíme predchádzajúce riešenie. Čo ak sa naše fonty nenačítali? V tomto spôsobe ich aktivujeme, iba ak sa načítali správne. To znamená použiť class pre element html (prípadne body). Class cez Javascript zmeníme, ak sme všetko správne načítali, a na triedu napárujeme naše fonty. Znie to ako ideálne riešenie. Nie je práve jednoduché, ale máme kontrolu nad načítaním našich fontov. Používame metódu FOFT, jediný väčší problém je s flexibilitou.

Critical FOFT

FOFT with a class ešte mierne vylepšíme. Pri tomto spôsobe vytvoríme 3 fázy. Najprv zobrazíme text s predvoleným fontom. Následne ho zobrazíme s naším kritickým fontom, ktorý obsahuje iba základné znaky v jednom štýle a jednej hrúbke. Nakoniec zobrazíme text so všetkými fontmi. Mierne sme zvýšili čas načítania, ale viditeľné zmeny textov sú pre používateľa menšie.

Ktoré riešenie mám teda použiť?

Ak chcete použiť jednoduchý spôsob, je tu pre vás font-face, prípadne jeho rozšírenie o preload. Dva jednoduché spôsoby, o ktoré sa netreba starať.

Na riešenie s font-display si budeme musieť ešte chvíľu počkať.

Ak ste však náročnejší, odporúčam využiť jednu z ostatných možností. Kritický font použite, ak vám nevadia 3 fázy načítania, inak odporúčam FOFT with a Class.