Ми робимо невелику перерву в роботі над пошуком, щоб вирішити невелику проблему.
“FOUT” - це “Спалах нестильового тексту”. Це явище, коли шрифти @ font-face завантажуються трохи, і таким чином ви бачите запасний шрифт перед власним шрифтом. Зазвичай це не проблема у Typekit. Сьогодні це не є проблемою в сучасних браузерах (крім IE 9). Однак для нас це проблема, оскільки ми спеціально вирішили завантажувати Typekit JavaScript асинхронно.
Надія все ж не втрачена, Typekit вирішила цю проблему, нам просто потрібно виконати невелику роботу на нашому сайті. Ми додали нову назву класу до елемента під назвою “wf-loading” (завантаження веб-шрифтів). Потім у нашому CSS ми заявляємо, що будь-який селектор, який використовує власний шрифт, є видимо прихованим, поки це ім'я класу не зникне. Ви можете подумати трохи ризиковано, але якщо шрифт не вдається завантажити, є час очікування, який у будь-якому випадку видаляє клас. Це просто для боротьби з FOUT, пам’ятайте, лише трохи візуальної тонкості.
Ми робимо все це, роблячи маленький Sass, який @mixinназивається “предотвратитеЛЮБО”, і додаємо @includeйого до наших спеціальних стеків шрифтів, які також є @mixins.
Зараз це добре працює для нас. Зрештою, в цьому дизайні ми переходимо до HF&J-шрифтів, які завантажуються безпосередньо через @ font-face, тому в основному перестаємо турбуватися з цього приводу.