Blixtrande webbfonter och vad du kan göra åt det

Webbfonter laddar en aning långsamt. Använder du allt för många fonter hinner sidan ladda allt innehåll innan fonten är framme och du får det som på teknikspråk kallas för FOUT (Flash of Unstyled Text). I praktiken innebär det att sidan ritas upp så snart den kommit fram med de Fallback Fonts som du använder, själva ”flashen” kommer när dina webbfonter laddat klart och alla tecken på sidan byter från Fallback Fonts till webbfonter. Det här är ganska störande och ofta flyttas element på sidan om en aning då dina Fallback Fonts inte tar samma plats som dina webbfonter.

Det finns några enkla knep (och några mer avancerade) för att eliminera detta. Här nedan hittar du två trick som gör upplevelsen av din webbplats njutbarare. Båda exemplen nedan ska du lägga in i WordPress i headern på alla sidor.

Typekit

<style>
.wf-loading{font-family: "droid-sans"; visibility: hidden; background-color: #ffffff;}
.wf-active {visibility: visible;}
</style>

Google Fonts

<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.16/webfont.js"></script>
<script>
  WebFont.load({
    google: {
      families: ['Droid Sans', 'Droid Serif']
    }
  });
</script>

För den som vill lägga lite mer tid på en mer avancerad lösning finns det flera s.k. Web Font Loaders. En universell lösning för detta hittar du på GitHub. Den fungerar för flera olika lösningar som Typekit, Google Fonts, Fonts, Fontdeck och webbfonter du lägger på din egen server.