Мы делаем небольшой перерыв в работе над поиском, чтобы решить небольшую проблему.
«FOUT» - это «Вспышка нестилевого текста». Это явление, когда шрифты @ font-face загружаются немного дольше, и поэтому вы видите резервный шрифт перед пользовательским шрифтом. Обычно это не проблема Typekit. В наши дни это не проблема и для современных браузеров (кроме IE 9). Однако для нас это проблема, потому что мы специально выбрали асинхронную загрузку Typekit JavaScript.
Однако надежда не потеряна, Typekit решает эту проблему, нам просто нужно немного поработать над нашим сайтом. Мы добавляем новое имя класса к элементу под названием «wf-loading» (загрузка веб-шрифтов). Затем в нашем CSS мы объявляем, что любой селектор, использующий настраиваемый шрифт, явно скрыт до тех пор, пока имя этого класса не исчезнет. Вы можете подумать, что это немного рискованно, но если шрифт не загружается, существует тайм-аут, который все равно удаляет класс. Это просто для борьбы с FOUT, помните, просто немного визуальной тонкости.
Мы делаем все это, создав небольшой Sass @mixinпод названием «preventFOUT» и вставляя @includeего в наши собственные стеки шрифтов, которые также являются @mixins.
Сейчас это хорошо работает для нас. В конечном итоге в этом дизайне мы переходим к шрифтам HF&J, которые загружаются напрямую через @ font-face, поэтому мы в основном перестаем об этом беспокоиться.