Trochu si oddýchneme od práce na vyhľadávaní, aby sme vyriešili trochu nepríjemný problém.
„FOUT“ je „Flash neštýlovaného textu“. Toto je jav, pri ktorom sa načítanie fontov @ font-face trochu trvá, a tak uvidíte záložné písmo pred vlastným fontom. Za normálnych okolností to nie je problém v aplikácii Typekit. V dnešnej dobe to nie je ani problém moderných prehľadávačov (okrem IE 9). Robí nám to však problém, pretože sme sa špeciálne rozhodli asynchrónne načítať JavaScript Typekit.
Nádej však nie je stratená, spoločnosť Typekit má tento problém vyriešený, len musíme na našom webe urobiť viac práce. Na prvok s názvom „wf-loading“ (načítanie webového písma) sme vložili nový názov triedy . Potom v našom CSS deklarujeme, že každý selektor, ktorý používa vlastné písmo, je viditeľne skrytý, kým názov triedy nezmizne. Možno si myslíte, že je to trochu riskantné, ale ak sa písmo nepodarí načítať, existuje časový limit, ktorý triedu aj tak odstráni. To je len pre boj ČI pamätajte, len malá vizuálna jemnosť.
Toto všetko robíme tak, že @mixinvytvoríme malý Sass s názvom „preventFOUT“ a napíšeme @includeho do našich vlastných zásobníkov písma, ktoré sú tiež @mixins.
Teraz to funguje dobre pre nás. Nakoniec v tomto dizajne prejdeme k fontom HF&J, ktoré sa načítajú priamo cez @ font-face, takže si s tým v podstate prestaneme robiť starosti.