Vermeiden FOUT wenn Typekit mit Font Ereignisse mit

Question

wir dies mit Schriftarten Asynchron mit Typekit laden:

<script src="https://use.typekit.net/whatever.js"></script> 
<script>try{Typekit.load({async:true});}catch(e){}</script> 

Aber dann als arial für einen Bruchteil einer Sekunde, bevor die Seite geladen hatten wir Probleme mit Schriften werden wir gestylt so verstecken Elemente wie diese (adobe Anzeigen dieser Klasse Elemente):

.wf-loading{ 
    h1, h2, h3, h4, h5, p, a{ 
     visibility: hidden; //hide stuff until adobe gives us the font 
    } 
} 

Aber was passiert, wenn Adobes Server unten sind, die zweimal im letzten Monat für London passiert ist. Werden die Elemente eingeblendet? Wie verwalten andere Leute dieses Problem mit Typekit?

Keine Informationen hier: https://helpx.adobe.com/typekit/using/font-events.html

Answer 1

Hier ist ein Fix, um sicherzustellen, dass Browser-Standardschriftarten angezeigt werden, wenn Typkit-Server nicht verfügbar sind.

<script> 
     (function(d) { 
      loadFonts = 1; 
      if(window.sessionStorage){ 
       if(sessionStorage.getItem('useTypekit')==='false'){ 
        loadFonts = 0; 
       } 
      } 

      if (loadFonts == 1) { 
        var config = { 
         kitId: 'XXXXXXXX', 
         scriptTimeout: 3000, 
         async: true 
        }, 
        h=d.documentElement,t=setTimeout(function(){h.className=h.className.replace(/\bwf-loading\b/g,"")+" wf-inactive";if(window.sessionStorage){sessionStorage.setItem("useTypekit","false")}},config.scriptTimeout),tk=d.createElement("script"),f=false,s=d.getElementsByTagName("script")[0],a;h.className+="wf-loading";tk.src='https://use.typekit.net/'+config.kitId+'.js';tk.async=true;tk.onload=tk.onreadystatechange=function(){a=this.readyState;if(f||a&&a!="complete"&&a!="loaded")return;f=true;clearTimeout(t);try{Typekit.load(config)}catch(e){}};s.parentNode.insertBefore(tk,s); 
       } 
      } 

     )(document); 
     </script> 
<style> 
     .wf-loading p, .wf-loading h1, .wf-loading h2, .wf-loading h3, .wf-loading h4 { 
      visibility: hidden; 
     } 
     .wf-active p, .wf-active h1, .wf-active h2, .wf-active h3, .wf-active h4 { 
      visibility: visible; 
     } 
     .wf-inactive p, .wf-inactive h1, .wf-inactive h2, .wf-inactive h3, .wf-inactive h4 { 
      visibility: visible; 
     } 
</style> 

Sie können mehr über the full solution in this blog post lesen.

Answer 2

Ich habe in diesem Lauf vor, aber die genauen Details nicht mehr erinnern kann.

Ich bin mir ziemlich sicher, dass es entweder:

a) Typekit entfernt die .wf-Laden Klasse nach einer gewissen Zeit als Sicherheitsmaßnahme. b) Fügen Sie ein eigenes Timeout-Skript hinzu, das die Klasse aus dem Hauptteil entfernt.