FOIT, FOUT és a font-display property

2019-02-15

Webfontok használata esetén gyakori jelenség a FOUT (Flash of Unstyled Text) és FOIT (Flash of Invisible Text). Nem komoly problémáról van szó, szerintem a webfejlesztők 99%-a egyáltalán nem foglalkozik vele. Ha valaki azonban abszolút 100%-os performance-ra törekszik, érdemes egy kicsit elmerülni a témában.

FOUT-ról akkor beszélünk amikor a böngésző még nem töltötte le a webfontot, de ennek ellenére megjeleníti a szöveget. Ilyenkor egy fallback betűtípus töltődik be, amit mi határozhatunk meg a font stack-ben. Ha nincs ilyen, akkor a default rendszer betűtípus kerül betöltésre. Abban a pillanatban ahogy a webfont letöltődik, a szöveg betűtípusa hirtelen megváltozik, amit egy villanásnak észlelünk, innen a jelenség neve.

A FOUT elkerülése érdekében a böngészők eltérő módszereket alkalmaznak. Általános megoldás, hogy 3 másodpercet várnak a webfont betöltésére és addig semmilyen szöveget nem jelenítenek meg. Ha ennyi idő alatt sem töltődik le a webfont, akkor a szöveg a fallback betűtípussal jelenik meg. Ezzel ugyan elkerülhető a FOUT, viszont, a semmiből hirtelen előtűnő szöveg miatt FOIT jelenségről beszélünk.

A böngészők alapértelmezett font renderelési metódusát korábban csak JavaScript segítségével tudtuk módosítani. Ennek kiváltására vezették be a font-display CSS property-t, melyhez hat különböző érték tartozik:

A font-display jelenleg Firefox, Chrome, Safari és Opera alatt működik. A leírtak alapján azt hiszem kijelenthető, hogy ha a webfont betöltési ideje 100 ms alatt van, akkor nem kell ezzel a problémával foglalkozni. Ezért (is) fontos, hogy csak azokat a fontokat töltsük be, amiket valóban használunk az oldalon.