Fonty woff sú a stále budú tým čo robí naše weby zaujímavejšími. V dnešnej „nedeľnej kázni (ja sa usmievam tak aj ty sa usmej) sa však dozviete, čo robíte nie vhodne. Nie vhodne preto, lebo nikomu nič neprikazujem. To správne rozhodnutie je vždy založené na potrebách a vášho zváženia vkusu a dizajnu. Preberme si to teda od začiatku. Keď si nainštalujete, alebo už máte predinštalovanú wordpress šablónu, ocitnete sa pred holou skutočnosťou. Čo idete použiť alebo už je preddefinované písmo. V každom prípade idete do globálnych nastavení a volíte typ písma, farbu pozadia a farbu písma. To isté vyberáte pri nadpisoch H2 atď.
Moje odporúčanie je jednoduché. Zvoľte jeden font (iba ako vzor) povedzme Arial. Ten zadefinujeme pre všetky položky ktoré budeme používať. Veľkosť písma je teraz pre vás viac ako nerozhodná. No tu je viacero úskalí ktoré je treba dodržať voči medzinárodne uznávaným pravidlám internetu. Ide o normu WCAG 2.1, ktorá myslí aj na osoby slabozraké a nevidomé. Takže je treba byť milosrdný aj voči nim. Preto Fonty písma musia mať aspoň 12 bodov zobrazenia a musia spĺňať farebný kontrast oproti pozadiu 7:1.
Písmo v prehliadači
Ak neviete o čom píšem tak si to môžete vyskúšať prakticky na tomto testeri. Zadáte farby a wave(bodka)webaim(bodka)org tester vám sám ukáže kontrastné pomery. Nepovie vám však o hrúbke písaného fontu nič. Následne sa to „laicky“ urobí nasledovne. Otvoríte si prehliadač a na ňom si zvolíte ctrl + alebo, ctrl – a v pravo hore sa dočítate že máte otvorené okno na 100%. Nie viac a nie menej. Potom si otvoríte zobrazenie vašej url ktorú chcete skontrolovať. Písmo nesmie byť opticky ako keby rozmazané, má vyzerať „štíhlo“ a príjemne čitateľné.
Teda fonty woff máte zvolené povedzme Arial na 400 a písmo musí spĺňať aspoň 12 pixelov. Písmo je dôležité, najdôležitejšie z celého webu. Pretože sa číta a na písme záleží. Dizajn je len otázka vkusu a to čo sa páči jednému to sa nepáči druhému, ale písmo číta každý. Samozrejme netreba zabudnúť aj na ikony (svg) s odkazmi na kliknutie, tie musia mať tiež určitú predpísanú veľkosť.
V nepomere
Teraz vám vysvetlím, prečo použiť jedni fonty woff, je najlepšie riešenie pre weby. Keď si podrobnejšie pozriete obrázok, zistíte že nástroj na renderovanie spustil kontrolu pripojenia niekoľkých fontov na doméne. Okrasa nikomu nepomôže a webu to škodí. Zbytočne došlo k sťahovaniu nepotrebných konektov na fotnty, ktoré možno ani nepotrebujete používať. Tým, že robot musí načítať viackrát platné linky (DOM) dochádza k oneskoreniu načítania celého html dokumentu. To znamená všetkého čo na webe v tej chvíli je. Ešte horšie sú na tom prehliadače pre mobilné telefóny. Tie sa musia popasovať ešte aj s css a javascript štýlmi a zaraďovať čo k čomu patrí. Tým sa váš web načítava každým fontom zhruba o 60ms neskôr. Ale aj nemusí. Môže to byť aj 160ms od kondície servera kde hostujete.
Otvoriť obrázok v novom okne prehliadača.
Výsledok teda môže byť spoločne z ostatnými súbormi css a js, json, ajax, svg, png, jpg, webp hrozivo dlhý. V každom prípade existuje technika cache pre prehliadače, ktorá výrazne časy skráti. Ale keď je veľa fontov, je ich veľa aj na strane cache, čo aj tak až tak výrazne neurýchli načítavanie. Preto som vybral aj taký obrázok, kde je uvedený počet súborov. Nuž a to stále píšem o fontoch ktoré sú na strane webu. Ako vidíte na 112 pozícii je externý font, ktorý sa sťahuje z cudzej domény. Tam je to ešte horšie ako dobré riešenie.
Štýly písma a roboty
Pretože všetky roboty, či už prehľadávačov alebo prehliadačov musia najprv overiť spätný konekt či je link funkčný. To obyčajne trvá 120ms. No môže sa stať a aj sa to stáva, že robot prehliadača dostane povel: Zníženie vplyvu kódu tretích strán – Hlavné vlákno bolo 4 220 ms zablokované kódom tretej strany. Alebo nástroj Lighthouse zaznamená „chyby prehliadača zaznamenané do konzoly“, čo môže znamenať všeličo možné. No a vtom prípade čisto hypotetický výpočet. Ak sa vám bežne načítava web 1,7 sekundy pre mobil, tak v okamihu odmietnutia konektu je to 4,5 sekundy a aj viac, podľa rozsahu chyby.
Keď že font je zvyčajne prepojený na ďalšie podporné akcie, vždy sa nabalí ďalší nefungujúci konekt na iný súbor. Každý predsa chce aby mal web rýchly ako blesk a aby návštevník nečakal kým sa web načíta. Aby som zhrnul „dnešnú nedeľnú kázeň (smejem sa, tak sa usmievajte aj vy)“. Vyhýbajte sa fontom ktoré nepotrebujete, nebudete potrebovať ani v budúcnosti ani teraz v tejto chvíli. Robte weby v jednom fonte (ak to naozaj nie je nevyhnutné použite fonty podľa seba), to pomôže pri celkovom hodnotení rýchlosti webu. Hlavne sa vyhnite externým fontom z druhej strany.
Som rád ak vám moje rady pomôžu, tak píšte komentáre na čokoľvek z tejto témy.
Pavol Knut navrátil