Küçük bir sıkıntıyı çözmek için aramaya biraz ara verdik.
"FOUT", "Stilsiz Metin Flaşı" anlamına gelir. Bu, @ font-face yazı tiplerinin yüklenmesinin biraz zaman aldığı ve böylece özel yazı tipinden önce yedek yazı tipini görmenizin bir olgusudur. Bu normalde Typekit'te bir sorun değildir. Bu günlerde modern tarayıcılarda da gerçekten bir sorun değil (IE 9 hariç). Ancak, Typekit JavaScript'i eşzamansız olarak yüklemeyi özellikle seçtiğimiz için bu bizim için bir sorundur.
Yine de umut kaybolmaz, Typekit bu sorunu çözdü, sadece sitemizde biraz çalışma yapmamız gerekiyor. "Wf-loading" adlı elementin üzerine yeni bir sınıf adı koyuyoruz (web font yükleniyor). Daha sonra CSS'mizde, özel bir yazı tipi kullanan herhangi bir seçicinin, bu sınıf adı kaybolana kadar görünür şekilde gizlendiğini beyan ederiz. Biraz riskli olduğunu düşünebilirsiniz, ancak yazı tipi yüklenemezse, sınıfı yine de kaldıran bir zaman aşımı olur. Bu sadece FOUT'la savaşmak için hatırlayın, sadece biraz görsel incelik.
Tüm bunları @mixin, "engelleFOUT" adında küçük bir Sass yaparak ve @includeonu özel yazı tipi yığınlarımıza ekleyerek yapıyoruz @mixin.
Bu artık bizim için iyi çalışıyor. Nihayetinde bu tasarımda, doğrudan @ font-face aracılığıyla yüklenen HF&J yazı tiplerine geçiyoruz, böylece temelde bu konuda endişelenmeyi bırakıyoruz.