Kami mengambil sedikit istirahat dari mengerjakan penelusuran untuk menyelesaikan sedikit masalah yang mengganggu.
“FOUT” menjadi “Flash of Unstyled Text”. Ini adalah fenomena di mana font @ font-face membutuhkan sedikit waktu untuk dimuat dan dengan demikian Anda melihat font fallback sebelum font kustom. Ini biasanya bukan masalah di Typekit. Juga bukan masalah di browser modern hari ini (kecuali IE 9). Namun, ini menjadi masalah bagi kami karena kami secara khusus telah memilih untuk memuat JavaScript Typekit secara asinkron.
Harapan tidak hilang, Typekit mengatasi masalah ini, kami hanya perlu melakukan sedikit pekerjaan di situs kami. Kami menempatkan nama kelas baru pada elemen yang disebut "wf-loading" (pemuatan font web). Kemudian di CSS kami, kami menyatakan bahwa pemilih apa pun yang menggunakan font khusus akan terlihat tersembunyi sampai nama kelas itu hilang. Anda mungkin berpikir sedikit berisiko, tetapi jika font gagal dimuat, ada batas waktu yang menghapus kelas tersebut. Ini hanya untuk melawan FOUT, ingat, hanya sedikit visual yang bagus.
Kami melakukan semua ini dengan membuat Sass kecil yang @mixindisebut "preventFOUT" dan @include-ing di tumpukan font kustom kami, yang juga @mixins.
Ini bekerja dengan baik untuk kita sekarang. Pada akhirnya dalam desain ini kita beralih ke font HF&J yang memuat langsung melalui @ font-face jadi pada dasarnya kita berhenti mengkhawatirkan hal ini.