• Hoppa till huvudnavigering
  • Hoppa till huvudinnehåll
  • Hoppa till det primära sidofältet
  • Hoppa till sidfot

Xponent

WordPress-experten

  • Varför WordPress?
  • WordPress
    • WordPress-tips
    • Artiklar vi läst
    • Fyradagars WordPress-kurs
      • Kursdatum & anmälan
      • Kurs i WordPress dagtid
      • Kurs i WordPress kvällstid
    • WordPress-paket
    • WordPress-manual
    • WordPress teman
    • Genesis – en kort genomgång
  • Vi hjälper dig
    • Att bygga nytt
    • Att modernisera
    • Att serva
  • Xponent
    • Om Xponent
    • Portfolio
    • Nyheter
    • Integritetspolicy & cookies
    • Xponent in English
  • Kontakt
  • Sök
Hem · WordPress-tips · Blixtrande webbfonter och vad du kan göra åt det

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

4 oktober 2016 publicerat av xponent Lämna en kommentar

fout
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.

Arkiverad som: WordPress-tips Märkt med: felsökning Google webfonts Typekit/Adobe Fonts typografi webbtypografi

 

I behov av högre fart?

WordPress är inte långsamt i sig, tvärtom så är det en lösning som kan hålla farten uppe och presentera en massa sidor och interaktivitet till väldigt många samtidiga användare.

Lämna ett svar Avbryt svar

Din e-postadress kommer inte publiceras. Obligatoriska fält är märkta *

Aktuellt

Konstnären Franco Pincinis portfolio

För konstnären Franco Pincini har vi skapat webbplats som fungerar som en portfolio där hans många verk kan visas upp.

Produktpresentationer med Inriver och WooCommerce

Lidingö Urhandels nya webbplats och nya logotyp

En helt nyproducerad webbplats för Företagsfokus

Wordpress-tips

Skrubba rent htaccess vid ominstallation

Om ett problem som kan uppstå när du vill installera en ny sajt på en server där det funnits en installation tidigare. I vårt exempel kunde vi inte ens logga in efter nyinstallation, men vi löste det genom att skrubba .htaccess rent.

Fria och licensierade bilder

Underhåll av webbplatser

Gör en körbar kopia av en webbplats

När det ska bli likadant varje gång

Nyhetsbrev med WordPress-tips

Inte för ofta, inte för långt och när det kommer ändå fyllt med smarta tips för dig som jobbar med WordPress; antingen som redaktör eller producent.


Xponent stöder

Följ Xponent

  • LinkedIn
  • RSS
  • Twitter
  • Vimeo

 

© 2025 Xponent · sitemap · cookies+gdpr · Powered by WordPress & Genesis