Nous prenons une petite pause dans nos recherches pour résoudre un petit problème épineux.
«FOUT» étant «Flash of Unstyled Text». C'est un phénomène où les polices @ font-face prennent un peu de temps à se charger et vous voyez donc la police de secours avant la police personnalisée. Ce n'est normalement pas un problème dans Typekit. Ce n'est pas non plus vraiment un problème dans les navigateurs modernes de nos jours (sauf IE 9). Cependant, c'est un problème pour nous car nous avons spécifiquement choisi de charger le JavaScript Typekit de manière asynchrone.
L'espoir n'est pas perdu cependant, Typekit a ce problème couvert, nous avons juste besoin de faire un peu de travail sur notre site. Nous avons mis un nouveau nom de classe sur l' élément appelé «wf-loading» (chargement de polices web). Ensuite, dans notre CSS, nous déclarons que tout sélecteur qui utilise une police personnalisée est visiblement caché jusqu'à ce que ce nom de classe disparaisse. Vous pourriez penser un peu risqué, mais si la police ne se charge pas, il y a un délai d'attente qui supprime la classe de toute façon. C'est juste pour lutter contre FOUT rappelez-vous, juste un peu de subtilité visuelle.
Nous faisons tout cela en créant un petit Sass @mixinappelé «preventFOUT» et en le @includemettant dans nos piles de polices personnalisées, qui sont aussi des @mixins.
Cela fonctionne bien pour nous maintenant. En fin de compte, dans cette conception, nous passons aux polices HF&J dans lesquelles se chargent directement via @ font-face, nous arrêtons donc de nous en préoccuper.
