Vi tar en liten paus från att arbeta med sökning för att lösa ett lite fnissande problem.
"FOUT" är "Flash of Unstyled Text". Detta är fenomen där @ font-face-teckensnitt tar lite att ladda och därmed ser du reservteckensnittet före det anpassade teckensnittet. Detta är normalt inte ett problem i Typekit. Inte heller är det verkligen ett problem i moderna webbläsare dessa dagar (förutom IE 9). Det är dock ett problem för oss eftersom vi specifikt har valt att ladda Typekit JavaScript asynkront.
Hoppet är dock inte förlorat, typekit har detta problem täckt, vi behöver bara göra en bit arbete på vår webbplats. Vi sätter ett nytt klassnamn på elementet som heter “wf-loading” (web font loading). Sedan i vårt CSS förklarar vi att varje väljare som använder ett anpassat teckensnitt är synligt dolt tills det klassnamnet försvinner. Lite riskabelt kan du tänka dig, men om teckensnittet inte går att ladda upp finns det en timeout som ändå tar bort klassen. Detta är bara för att slåss FÖR minns, bara lite visuell finhet.
Vi gör allt detta genom att skapa en liten Sass som @mixinheter "preventFOUT" och @include-ing den i våra anpassade typsnittsstackar, som också är @mixins.
Detta fungerar bra för oss nu. I slutändan i denna design flyttar vi över till HF & J-teckensnitt där de laddas direkt via @ font-face så att vi i princip slutar oroa oss för detta.