We nemen een korte pauze van het werken aan zoeken om een klein knagend probleem op te lossen.
"FOUT" is "Flash of Unstyled Text". Dit is een fenomeen waarbij @ font-face fonts even nodig hebben om te laden en je dus het fallback font vóór het custom font ziet. Dit is normaal gesproken geen probleem in Typekit. Het is tegenwoordig ook niet echt een probleem in moderne browsers (behalve IE 9). Het is echter een probleem voor ons omdat we er specifiek voor hebben gekozen om de Typekit JavaScript asynchroon te laden.
Hoop is echter niet verloren, Typekit heeft dit probleem opgelost, we hoeven alleen maar een klein beetje werk te doen op onze site. We zetten een nieuwe klassenaam op het element met de naam "wf-loading" (laden van weblettertypen). Vervolgens verklaren we in onze CSS dat elke selector die een aangepast lettertype gebruikt, zichtbaar verborgen is totdat die klassenaam verdwijnt. Een beetje riskant zou je denken, maar als het lettertype niet kan worden geladen, is er een time-out die de klasse toch verwijdert. Dit is alleen om FOUT te bestrijden, onthoud, gewoon een beetje visuele aardigheid.
We doen dit allemaal door een kleine Sass @mixingenaamd "preventFOUT" te maken en @includedeze in onze aangepaste lettertypestapels te plaatsen, die ook @mixins zijn.
Dit werkt nu goed voor ons. Uiteindelijk gaan we in dit ontwerp over op HF & J-lettertypen die rechtstreeks worden geladen via @ font-face, dus we hoeven ons hier in principe geen zorgen over te maken.