Het aantal websites dat op maat gemaakte fonts gebruikt neemt snel toe. De gewone font van de browser van de bezoeker is allang niet meer de standaard. Logisch, want met een mooi, duidelijke en vooral leesbare font geef je je website karakter. Bij het uitzoeken van een lettertype is niet alleen de leesbaarheid van belang, maar ook de laadsnelheid. Daarom kiezen veel websitebouwers voor de fonts van Google.
De meest geliefde fonts
Kijken we naar de meest geliefde fonts van Google, dan zijn er tien fonts die opvallen. Omdat het in dit artikel ook om de laadsnelheid van de fonts gaat, zetten we ze op rij van de snelst ladende lettertypes naar de langzaamst ladende lettertypes.
- Open Sans
- Roboto
- Oswald
- Lato
- Slabo 27px
- Droid Sans
- Roboto Condensed
- PT Sans
- Open Sans Condensed
- Source Sans Pro
Voor de vergelijking is gebruik gemaakt van WebPageTest. De testlocatie was Los Angeles en de testbrowser was Google Chrome. De snelste font laadde in 0.476 seconden en de langzaamste in 0.503 seconden. De verschillen liggen niet ver uit elkaar. Dat is een voordeel, want dan kun je zelf de mooiste uitkiezen.
Lokaal, CDN of Google Font?
Als je voor snelheid wilt gaan, kun je het best Google Fonts gebruiken, of lokaal hosten. Lokale fonts laden namelijk redelijk snel. TypeKit kun je beter niet gebruiken om je fonts te laden: dat vertraagt de laadtijd van je pagina aanzienlijk. Het voordeel van Google Fonts is ook dat de servers van Google erg stabiel zijn.
Wanneer je een font uitkiest, is het goed om in gedachten te houden wat de laadtijden van de fonts zijn en hoe je je tekst weergeeft op je website. Wat de handigste manier is, ontdek je met maar een methode: testen. Vergeet ook niet te testen met mobiele verbindingen, zoals 3G. Je wilt immers niet dat je mobiele bezoeker een slechtere ervaring met je website heeft dan een desktopgebruiker. Omdat mobiele bezoekers in de meerderheid beginnen te komen, is het belangrijk dat je website ook goed op een mobiel toestel werkt.
Tips om je font sneller te maken
Geef prioriteit aan het laden van lettertypes op basis van browserondersteuning. Laad niet alle stijlen van jouw favoriete font in, maar alleen de stijlen en tekensets die je nodig hebt. Daarmee voorkom je dat er onnodige onderdelen geladen worden, die de laadtijd van je website kunnen vertragen.
Experimenteer met het lokaal opslaan en laden van fonts en kijk of je een verschil merkt ten opzichte van bijvoorbeeld Google. En natuurlijk moet je als ontwerper ook rekeninghouden met de vraag: “Welke font past bij het uiterlijke van mijn website?”