Правим малка почивка в работата по търсенето, за да разрешим малко вълнуващ проблем.
„FOUT“ е „Flash of Unstyled Text“. Това е феномен, при който @ font-face шрифтовете се зареждат малко и по този начин виждате резервния шрифт преди потребителския шрифт. Това обикновено не е проблем в Typekit. Нито е наистина проблем в съвременните браузъри в наши дни (с изключение на IE 9). Това обаче е проблем за нас, защото специално сме избрали да заредим Typekit JavaScript асинхронно.
Надеждата обаче не е загубена, Typekit покрива този проблем, просто трябва да извършим малко работа на нашия сайт. Поставихме ново име на клас върху елемента, наречен “wf-loading” (зареждане на уеб шрифт). След това в нашия CSS декларираме, че всеки селектор, който използва персонализиран шрифт, е видимо скрит, докато името на класа изчезне. Може би си мислите малко рисковано, но ако шрифтът не успее да се зареди, има време за изчакване, което така или иначе премахва класа. Това е само за борба с БЕЗ запомнете, само малко визуална красота.
Правим всичко това, като правим малко Sass, @mixinнаречено „предотвратяване на ПЪТ“ и @includeго поставяме в нашите персонализирани стекове шрифтове, които също са @mixins.
Това работи добре за нас сега. В крайна сметка в този дизайн преминаваме към HF&J шрифтове, в които се зарежда директно чрез @ font-face, така че всъщност спираме да се тревожим за това.