Děláme si trochu pauzu od práce na hledání, abychom vyřešili malý problém.
„FOUT“ je „Flash of Unstyled Text“. To je jev, kdy se @ font-face fonty trochu načtou, a tak uvidíte záložní písmo před vlastním písmem. To v Typekitu obvykle není problém. Ani v dnešních moderních prohlížečích to není problém (kromě IE 9). Je to však pro nás problém, protože jsme se konkrétně rozhodli asynchronně načíst JavaScript Typekit.
Naděje však není ztracena, Typekit má tento problém pokrytý, musíme jen udělat spoustu práce na našem webu. Na prvek zvaný „wf-loading“ (načítání webového písma) jsme vložili nový název třídy . Pak v našem CSS deklarujeme, že jakýkoli selektor, který používá vlastní písmo, je viditelně skrytý, dokud tento název třídy nezmizí. Možná si myslíte, že je to trochu riskantní, ale pokud se písmo nepodaří načíst, existuje časový limit, který třídu stejně odstraní. To je jen pro boj ČTĚTE pamatujte, jen trochu vizuální jemnosti.
Děláme to tak, že @mixinvytvoříme malý Sass zvaný „preventFOUT“ a provedeme @includeto v našich vlastních zásobnících písem, což jsou také @mixins.
To pro nás nyní funguje dobře. Nakonec v tomto designu přejdeme k písmům HF&J, ve kterých se načítá přímo pomocí @ font-face, takže si v podstatě přestaneme dělat starosti.