Nahratie webfontu do stranky rubrika: Návrh
4
mario2402
Ako "pokrocile" nahravate webfonty do Vasich stranok, aby ste zabranili problemu FOUT (ci FOIT)?
Ja osobne font(y) vkladam (automatizovane) inline do externeho css (mam iba jeden subor css, ktory obsahuje vsetko), ktory sa samozrejme cachuje.
Jedina nevyhoda je jeden vacsi subor CSS namiesto viacerych mensich - co vsak sposoby rychlejsi prenos do klienta, kedze nevytvara zbytocne spojenia. Pouzivam iba woff a woff2 fonty (detekujem browser na servery), stare prehliadace a ich uzivatelia ma nezaujimaju.
Udajne sa jedna o antipattern.. V clankom (starych 4 roky) sa argumentuje:
-
ze font by nemal byt v kritickej casti nahravania --- lenze ak sa nepodari nahrat CSS, tak co mam z toho, ze font sa nenahra? ved stranka bude bez stylov nepouzitelna - tak ci tak sa dovtedy vykreslenie zablokuje
- font v base64 je narocnejsi na "vypocet", najma v mobiloch --- pred 4 rokmi boli ake mobily, a ake su dnes - podstatne vykonnejsie - teda toto je tiez irelevantne..
Nasiel som este iny sposob nahravania fontov cez Web Font Loader, cookies, fallback pismo.. ( https://www.souki.cz/jak-efektivne-nacitat-webfonty alebo https://phpfashion.com/jak-spravne-nacitat-webove-fonty ) - ale to mi pripada ako velmi obskurne riesenie, a ziadnu vyhodu tam nevydim.
6
ondrakoupil
Ahoj,
snažím se na to použít co nejstandardnější a "nejnormálnější" techniky, co jde. Většina hacků a složitých konstrukcí zastará a stane se zbytečnými, standardní prostředky zůstanou.
Vycházím z předokladu, že FOUT je menší zlo než FOIT, a že cokoliv je lepší, než když se kvůli špatnému připojení, selhání JS nebo nějaké jiné těžko předvídatelné chybě nezobrazí text vůbec (webkit). Takže pokud font z google fontů, použiju normálně CSS řádek, který google fonty vygenerují - využije se cache a googlí CDN a dopad na rychlost načtení bude nízký. Pokud vlastní font, tak definici jeho @font-face zahrnu do hlavního souboru se styly, který obsahuje zbundlované všechno potřebné stylování běžných částí webu. Do CSS zadávám formát ve všech rozumných formátech, prohlížeč si stejně stáhne jen jeden, pro něj nejvhodnější. Důležité je v HTTP hlavičkách povolit cachování fontu a pokud možno i gzip kompresi (i když to není zas tak extra účinné). Do CSS k @font-face je dobré dát font-display: fallback, což je takový kompromis mezi co nejdřívějším stahováním souboru s fontem a dlouhým zobrazením fallback fontu, prohlížeč dá chvilku na stažení fontu a pozdrží rendering písma, ale fakt jen malou chvilku, aby na dobrém připojení uživatel nic nepoznal a na pomalém ho neobtěžoval chybějící text, a pak teprve použije fallback font. A jako fallback font použiju (kromě generického serif nebo sans-serif) i nějaký systémový nebo hodně běžný font, který je šířkou jednotlivých znaků co nejpodobnější tomu mému custom fontu. Dá se na to využít např. https://meowni.ca/font-style-matcher/. Díky tomu, pokud bude chvíli viditelný fallback font a donačte se custom font, tak nebude příliš viditelná změna, nedojde k znatelnému přeskupení řádků a výšky odstavců, prohlížeč nebude muset znovu tolik dělat layout apod.
JS font loadery jsou podle mě vhodné na silně designové weby, kde je výkon a rychlost upozaděna a jde hlavně o efekt. Někdy může dávat smysl třeba zobrazit preloader blokující celou stránku a až po načtení všech fontů stránku zobrazit, což právě JS font loadery umožní správně načasovat (a zobrazit stránku dřív, než dojde k load eventu). Ale s tím hodně opatrně, dá se tím udělat víc škody než užitku a já osobně to třeba nemám moc rád.
Pro zobrazení všech 2 odpovědí se prosím přihlaste:
Nebo se přihlaste jménem a heslem:
Komentáře