Kicsit szünetet tartunk a keresésen való munkában, hogy megoldhassunk egy kis nigli problémát.
A „FOUT” a „stílus nélküli szöveg villanása”. Ez az a jelenség, amikor a @ font-face betűtípusok betöltéséhez egy kis időre van szükség, és így a tartalék betűtípust az egyéni betűtípus előtt látja. Ez általában nem jelent problémát a Typekitben. Manapság ez sem jelent problémát a modern böngészőkben (az IE 9 kivételével). Ez azonban problémát jelent számunkra, mivel kifejezetten a Typekit JavaScript aszinkron betöltését választottuk.
A remény nem veszett el, a Typekit-nek ez a problémája lefedett, csak egy kis munkát kell elvégeznünk a webhelyünkön. Új osztálynévvel láttuk el a „wf-loading” (web betűtípus betöltése) nevű elemet. Ezután a CSS-ben kijelentjük, hogy minden olyan választó, amely egyéni betűtípust használ, láthatóan rejtve marad, amíg az osztály neve eltűnik. Kicsit kockázatos lehet gondolni, de ha a betűtípus betöltése nem sikerül, akkor van egy időtúllépés, amely mindenképpen eltávolítja az osztályt. Ez csak a FOUT Emlékezés elleni küzdelemhez szól, csak egy kis vizuális szépség.
Mindezt úgy tesszük, hogy elkészítünk egy kis Sass @mixinnevet „preventFOUT” néven és beillesztjük @includeaz egyedi betűkészleteinkbe, amelyek szintén @mixins.
Ez most jól működik nekünk. Végül ebben a kialakításban áttérünk a HF & J betűkészletekre, amelyek közvetlenül a @ font-face segítségével töltődnek be, így alapvetően abbahagyjuk az aggodalmat.