Wir machen eine kleine Pause von der Suche, um ein kleines Problem zu lösen.
"FOUT" ist "Flash of Unstyled Text". Dies ist ein Phänomen, bei dem das Laden von @ font-face-Schriftarten etwas dauert und Sie daher die Fallback-Schriftart vor der benutzerdefinierten Schriftart sehen. Dies ist normalerweise kein Problem in Typekit. In modernen Browsern ist dies heutzutage auch kein wirkliches Problem (außer IE 9). Dies ist jedoch ein Problem für uns, da wir uns speziell dafür entschieden haben, das Typekit-JavaScript asynchron zu laden.
Die Hoffnung geht jedoch nicht verloren. Typekit hat dieses Problem gelöst. Wir müssen nur ein bisschen Arbeit auf unserer Website erledigen. Wir haben dem Element "wf-load" (Laden von Web-Schriftarten) einen neuen Klassennamen hinzugefügt. Dann erklären wir in unserem CSS, dass jeder Selektor, der eine benutzerdefinierte Schriftart verwendet, sichtbar ausgeblendet wird, bis dieser Klassenname verschwindet. Ein wenig riskant, könnte man meinen, aber wenn die Schriftart nicht geladen werden kann, gibt es eine Zeitüberschreitung, die die Klasse trotzdem entfernt. Dies ist nur für den Kampf FOUT erinnern, nur ein wenig visuelle Schönheit.
Wir machen das alles, indem wir einen kleinen Sass @mixinnamens "verhindernFOUT" machen und @includeihn in unseren benutzerdefinierten Schriftstapeln verwenden, die auch @mixins sind.
Das funktioniert jetzt gut für uns. Letztendlich wechseln wir in diesem Design zu HF & J-Schriftarten, die direkt über @ font-face geladen werden, sodass wir uns im Grunde keine Gedanken mehr darüber machen.