System Fonts op een website

Iets kleins met een grote impact. Wat vaak al voor je bepaald door een thema binnen WordPress, de fonts (lettertypen) die je gebruikt op je website. Er zijn een heleboel opties hiervoor beschikbaar, maar wat zijn system of local fonts precies? Dat behandelen we in deze blogpost!

Er zitten een aantal grote voordelen verbonden aan het gebruik van System Fonts of local fonts. Deze zorgen er niet alleen voor dat jouw website sneller ingeladen kan worden, maar ook dat je website direct voldoet aan de strenge privacywetgevingen.

Veel thema’s en andere plug-ins maken standaard gebruik van een font dat extern ingeladen dient te worden. Oftewel: er wordt samengewerkt met derde partijen om de fonts beschikbaar te maken op jouw website. Hoewel dit er leuk uitziet, kleven hier een aantal flinke nadelen aan.

De nadelen van externe fonts

Wanneer jouw WordPress-website een extern font gebruikt (zoals een standaard Google Font-koppeling), moet de browser van jouw bezoeker eerst verbinding maken met een externe server om het lettertype te downloaden. Dit brengt drie grote nadelen met zich mee:

• Tragere laadtijd (Web Core Vitals): Elke externe aanvraag kost tijd. De browser moet wachten tot het lettertype binnen is voordat de tekst correct getoond kan worden. Dit kan zorgen voor een Flash of Unstyled Text (FOUT), waarbij de bezoeker de tekst eerst in een lelijk standaardlettertype ziet verspringen. Dit is nadelig voor je Google-scores.

• Privacy- en AVG/GDPR-risico's: Zodra een bezoeker jouw website laadt en er een font van een externe server (zoals Google) wordt aangeroepen, wordt het IP-adres van de bezoeker gedeeld met die derde partij. Volgens de Europese privacywetgeving (AVG) mag dit niet zomaar zonder expliciete toestemming vooraf. Dit heeft in het verleden al tot flinke boetes geleid voor website-eigenaren in de ergste gevallen.

• Afhankelijkheid van derden: Als de externe server van de font-provider een storing heeft of traag is, ondervindt jouw website daar direct hinder van.

Wat zijn System Fonts en welke zijn er standaard beschikbaar?

System fonts (systeemlettertypen) zijn lettertypen die al standaard zijn geïnstalleerd op het apparaat van jouw bezoeker (zoals een Windows-pc, Mac, iPhone of Android-toestel). Omdat het lettertype al lokaal op de computer of telefoon staat, hoeft jouw website 0 bytes aan font-bestanden te downloaden. Dit resulteert in een website die direct vloeiend en razendsnel laadt.

Tegenwoordig zijn de standaard systeemlettertypen van hoge kwaliteit en zien ze er zeer modern uit. Hier zijn de bekendste system fonts die vrijwel overal direct beschikbaar zijn:

1. De Moderne 'Sans-Serif' zonder schreef

Dit zijn de minimalistische, supersterke lettertypen die perfect zijn voor moderne websites, tech-blogs en webshops. Ze zijn ontworpen voor maximale leesbaarheid op schermen.

• San Francisco (-apple-system): Dit is het hypermoderne lettertype dat Apple gebruikt op alle iPhones, iPads en Macs. Het oogt exclusief en clean.
• Segoe UI: Het standaardlettertype van Microsoft (bekend van Windows 10 en 11). Het is strak, zakelijk en uiterst betrouwbaar.
• Roboto: Het bekende gezicht van Android (Google). Een heel open en vriendelijk lettertype dat perfect schaalt op mobiele schermen.

2. De Klassieke 'Serif' met schreef

Wil je jouw website juist een formele, betrouwbare of redactionele uitstraling geven? Alsof je een luxe krant of een fysiek boek leest? Dan zijn er de klassieke system fonts:

• Georgia: Dit is dé koning onder de scherm-lettertypen met een schreef. Georgia werd al in de jaren '90 door Microsoft ontwikkeld met één specifiek doel: extreem goed leesbaar zijn op digitale schermen. Het is warm, elegant en ideaal voor lange blogartikelen.
• Times New Roman / Palatino: De bekende klassiekers die al decennia op werkelijk elk apparaat te vinden zijn.

Zet ze bijvoorbeeld even allemaal op een rijtje open in je browser. Dit kan eenvoudig door hier naar even op te googelen, en probeer je in te denken wat het beste aansluit op jouw website. Wat ook mogelijk is in de meeste thema’s binnen WordPress om dit gelijk live uit te testen op je website. Zo krijg je een totaalbeeld van hoe het eruit kan gaan zien. Zoals bijvoorbeeld in onze blog van maandag is uitgetest met een “eigen” gemaakt thema met behulp van Claude.

Maakt dat écht zo’n verschil in snelheid? (Spoiler: Ja, enorm!)

Maakt die ene milliseconde nou echt uit?” Het korte antwoord is: ja, absoluut. Externe fonts zijn de digitale verkeersdrempels van het internet.

Wanneer je een extern font gebruikt (zoals een standaard Google Font), moet de browser van je bezoeker een soort mini-roadtrip maken. Eerst reist de browser naar een externe server om toestemming te vragen, daarna moeten de zware font-bestanden (Regular, Italic, Bold) worden gedownload via 4G of 5G op je telefoon, en dán pas mag de tekst op het scherm verschijnen.

Gebruik je een local of system font zoals Georgia? Dan bespaar je je website deze hele reis. Het resultaat?

0 bytes download: Het lettertype weegt letterlijk niks. En hoeft de reis vanuit derde bronnen niet te maken. 

Geen dansende teksten (CLS): Je herkent het wel: je opent een website, begint te lezen, en ineens verspringt de hele tekst omdat het lettertype een seconde later 'binnenkort'. Irritant voor de lezer, en Google straft je erom af. Met system fonts staat alles direct muurvast.

Groene scores in Google: Google is dol op snelle websites. Door externe fonts te schrappen, schieten je Core Web Vitals (de snelheidsmeters van Google) direct in het groen.

In een wereld waarin elke milliseconde telt voor je vindbaarheid én je bezoekers binnen 3 seconden wegklikken als een pagina hangt, zijn system fonts de ultieme gratis turbo-boost voor je website!

Het overstappen naar system fonts (of het lokaal hosten van je favoriete Google Font op je eigen hostingpakket bij MijnHostingPartner.nl) is een van de makkelijkste manieren om je website te versnellen en AVG-proof te maken. Je bespaart kostbare milliseconden bij het laden, wat fijn is voor je bezoekers én voor je positie in de zoekresultaten van Google!

Tip van MijnHostingPartner.nl: Controleer via de instellingen van je WordPress-thema in je hosting (onder 'Typografie') of je kunt kiezen voor System Fonts of Inherit. Veel moderne thema's ondersteunen dit tegenwoordig met één klik op de knop!