Robimy małą przerwę od pracy nad wyszukiwaniem, aby rozwiązać dręczący problem.
„FOUT” oznacza „Flash of Unstyled Text”. Jest to zjawisko polegające na tym, że ładowanie czcionek @ font-face zajmuje trochę czasu i dlatego przed czcionką niestandardową widać czcionkę zastępczą. Zwykle nie stanowi to problemu w Typekit. W dzisiejszych czasach nie stanowi to również problemu we współczesnych przeglądarkach (z wyjątkiem IE 9). Jest to jednak dla nas problem, ponieważ specjalnie wybraliśmy asynchroniczne ładowanie JavaScript Typekit.
Nadzieja nie jest jednak stracona, Typekit rozwiązuje ten problem, musimy tylko trochę popracować nad naszą witryną. Umieściliśmy nową nazwę klasy na elemencie o nazwie „wf-loading” (ładowanie czcionek internetowych). Następnie w naszym CSS deklarujemy, że każdy selektor używający niestandardowej czcionki jest widocznie ukryty, dopóki nazwa klasy nie zniknie. Możesz pomyśleć, że jest to trochę ryzykowne, ale jeśli czcionka nie ładuje się, następuje przekroczenie limitu czasu, który i tak usuwa klasę. To jest tylko po to, by walczyć z FOUT, pamiętajcie, tylko trochę wizualnie.
Robimy to wszystko, tworząc mały Sass o @mixinnazwie „PreventFOUT” i umieszczając @includego w naszych niestandardowych stosach czcionek, które również są @mixins.
To działa teraz dobrze dla nas. Ostatecznie w tym projekcie przechodzimy do czcionek HF&J, które ładują się bezpośrednio przez @ font-face, więc w zasadzie przestajemy się tym martwić.