Vi tager en lille pause fra at arbejde med søgning for at løse et lille niggling-problem.
“FOUT” er “Flash of Unstyled Text”. Dette er fænomen, hvor @ font-face-skrifttyper tager en lille smule at indlæse, og du ser dermed fallback-skrifttypen før den brugerdefinerede skrifttype. Dette er normalt ikke et problem i Typekit. Det er heller ikke virkelig et problem i moderne browsere i disse dage (undtagen IE 9). Det er dog et problem for os, fordi vi specifikt har valgt at indlæse Typekit JavaScript asynkront.
Håbet går ikke tabt, Typekit har dette problem dækket, vi skal bare udføre et stykke arbejde på vores side. Vi sætter et nyt klassenavn på elementet kaldet "wf-loading" (web font loading). Derefter erklærer vi i vores CSS, at enhver vælger, der bruger en brugerdefineret skrifttype, er synligt skjult, indtil klassens navn forsvinder. Lidt risikabelt tror du måske, men hvis skrifttypen ikke indlæses, er der en timeout, der alligevel fjerner klassen. Dette er bare for at bekæmpe FOUT husk, bare lidt visuel pænhed.
Vi gør alt dette ved at lave en lille Sass @mixinkaldet "preventFOUT" og @include-ing det i vores brugerdefinerede skrifttypestakke, som også er @mixins.
Dette fungerer godt for os nu. I sidste ende i dette design flytter vi over til HF & J-skrifttyper, hvor de indlæses direkte via @ font-face, så vi dybest set holder op med at bekymre os om dette.