Vi tar en liten pause fra å jobbe med søk for å løse et lite fnysende problem.
“FOUT” er “Flash of Unstyled Text”. Dette er fenomenet der @ font-face-skrifter tar litt å laste inn, og dermed ser du reservefonten før den tilpassede fonten. Dette er normalt ikke et problem i Typekit. Det er heller ikke noe problem i moderne nettlesere i disse dager (unntatt IE 9). Det er imidlertid et problem for oss fordi vi spesielt har valgt å laste Typekit JavaScript asynkront.
Håpet er ikke tapt skjønt, Typekit har dekket dette problemet, vi trenger bare å gjøre et stykke arbeid på nettstedet vårt. Vi setter et nytt klassenavn på elementet kalt “wf-loading” (web font loading). Så i CSS erklærer vi at enhver velger som bruker en tilpasset font er synlig skjult til det klassenavnet forsvinner. Litt risikabelt kan du tro, men hvis skriften ikke lastes inn, er det en timeout som fjerner klassen uansett. Dette er bare for å bekjempe FOUT husk, bare litt visuell finhet.
Vi gjør alt dette ved å lage en liten Sass @mixinkalt “preventFOUT” og @include-ing den i våre tilpassede skriftstabler, som også @mixiner s.
Dette fungerer bra for oss nå. Til syvende og sist i denne designen flytter vi over til HF&J-skrifter der de lastes direkte via @ font-face, så vi slutter å bekymre oss for dette.