Hoe webfonts de laadtijd van je website beïnvloeden (font performance)

Het komt natuurlijk veel professioneler over als je custom lettertypes op je website kunt gebruiken die ook in je huisstijlhandboek zijn vastgelegd. Hier zijn speciale lettertype bestanden voor die je kunt inlezen op je website. Deze online/web lettertypes worden vaak ‘webfonts’ genoemd.

Volgens het HTTP Archive gebruikt in 2025 ongeveer 88% van alle websites webfonts, wat hun populariteit onderstreept. Webfonts bieden dus meer design vrijheid om aan te sluiten bij je huisstijl of merk, maar ze brengen ook extra overhead met zich mee. 

Performance aspecten (o.a. laadtijd) van webfonts worden vaak over het hoofd gezien. Webfonts beïnvloeden namelijk in grote mate de laadtijd van je website en daarmee ook de merkbeleving, gebruiksvriendelijkheid, conversie, etc.

TLDR; In dit artikel licht ik alle performance problemen toe die samenhangen met het gebruik van webfonts. Tevens leg ik uit waarom je spaarzaam moet omgaan met webfonts en hoe je er de beste performance uit haalt.

#Webfonts voegen extra ballast toe aan je website

Webfonts vereisen vaak meerdere lettertype bestanden, omdat er vaak meerdere diktes en stijlen worden gebruikt. Afhankelijk van de complexiteit en het aantal fonts kunnen deze bestanden zo een groot deel uitmaken van de totale paginagrootte.

Maar ook het aantal HTTP-requests (aanvragen om een bestand te downloaden) en de tijd die hiermee gepaard gaat, maakt een groot deel uit van je gehele laadtijd. De typische HTTP-requests zijn onder andere:

Font‑CSS bestanden
Dit zijn de CSS bestanden met de font-definities met de verschillende gewichten en stijlen, zodat je het lettertype in je eigen CSS kunt gebruiken.

Eigenlijke lettertype bestanden
Dit zijn de lettertypebestanden zelf (WOFF, TTF, enz.) die gedownload moeten worden zodat de browser ze kan gebruiken wanneer ze in de CSS worden aangeroepen.

Validatiecontroles
Afhankelijk van de gebruikte externe webfont service (bijvoorbeeld Adobe fonts) kan er een licentiecontrole plaatsvinden om te verifiëren of je gerechtigd bent het font op je pagina te gebruiken.

De gevolgen van slechte font performance zijn:

• Langzamere laadtijden: Tekst verschijnt mogelijk pas nadat lettertype bestanden zijn geladen (“flash of invisible text of FOIT).
• Cumulative Layout Shift (CLS): Webfonts die niet meteen geladen worden, kunnen layout verschuivingen veroorzaken.
• Hogere bounce rates: Trage laadtijden of schokkerige tekstweergave kan gebruikers frustreren en wegjagen.

Een ander probleem van custom webfonts is dat ze ‘render-blocking’ bronnen zijn. Dit zijn bestanden die voorkomen dat de pagina snel laadt, omdat de browser ze eerst moet laden en verwerken voordat ze op de pagina kunnen worden weergegeven.

#Webfonts worden laat door de browser ontdekt

Webfonts moeten dus eerst geladen worden voordat tekst kan worden weergegeven, zodat gebruikers de content op je pagina kunnen zien. De browser ‘ziet’ je webfonts dus pas nadat de HTML is geladen en de CSS bestanden zijn geparsed*).

*) Parsing bij browsers en websites is het proces waarbij de browser ruwe code (HTML, CSS, JavaScript) omzet in een bruikbare structuur voor weergave.

Dit kan tijd kosten en afhankelijk van het ontwerp van de website kunnen er meerdere webfonts nodig zijn om te laden, wat de laadtijd van je webpagina kan vertragen.

Als dit gebeurt, kunnen bezoekers te maken krijgen met het probleem Flash of Invisible Text (FOIT), waarbij de tekst klaar is om weergegeven te worden maar het webfont nog niet geladen is.

Een andere mogelijkheid is dat de tekst eerst met een fallback-font (font dat de browser gebruikt als je custom webfont niet laadt) wordt getoond totdat het webfont klaar is met laden. Dit staat bekend als Flash of Unstyled Text (FOUT).

Alhoewel deze scenario’s kunnen worden aangepakt door webfonts te ‘preloaden’ en geschikte font-display strategieën te gebruiken, kunnen webfonts ook extra performance problemen veroorzaken, zoals langere laadtijd voor andere resources door render-blocking.

#3rd party webfonts veroorzaken extra vertragingen

Externe webfont services (o.a. Google fonts, Adobe fonts, MyFonts) brengen extra laadtijden met zich mee omdat ze doorgaans van een externe server worden gedownload.

Verbinding maken met een externe server/domein brengt altijd kosten met zich mee. Omdat dit nieuwe DNS-opzoekingen, SSL verbindingstijden, afhankelijkheid van de prestaties van de externe server en mogelijke knelpunten met zich meebrengt. Vooral als je pagina verzoeken doet aan veel verschillende externe servers.

Afhankelijk van de gebruikte 3rd-party webfont service kunnen de verbinding- en responstijden variëren, omdat elk verzoek onderhevig is aan de variabiliteit en complexiteit van het internet, evenals de prestaties van de externe server.

Hoewel externe gehoste webfonts hun nadelen hebben, bieden ze ook voordelen, waaronder:

• Regelmatige updates en optimalisaties van webfonts, waar je direct toegang toe hebt.
• Geoptimaliseerde levering waarbij alleen de lettertype bestanden worden geladen die ook daadwerkelijk op de pagina worden gebruikt.
• Je kunt gebruik maken van een CDN om de (online) lettertypes te downloaden op basis van de locatie van de gebruiker, waardoor snelle laadtijden kunnen worden gerealiseerd.

Bovendien kun je preconnect- en prefetch-resource hints gebruiken om de volgorde in het downloadproces te veranderen en daarmee de laadtijd voor je lettertypes te verkorten.

#GDPR/AVG problemen met Google fonts

Een belangrijke reden om Google fonts niet te gebruiken, is als je website bezoekers uit de Europese Unie bedient. De Google Fonts servers staan namelijk in de VS en Google verzamelt persoonlijke gegevens zoals IP-adressen van je bezoekers bij het laden van fonts. 

Europese rechtbanken hebben deze praktijk namelijk illegaal verklaard onder de geldende EU privacyrichtlijnen (GDPR), waardoor extern laden juridische problemen kan opleveren. Een manier om dit op te lossen is door je Google fonts lokaal/zelf te hosten.

#Het zelf/lokaal hosten van online lettertypes

Dit is een veelbesproken onderwerp en er is geen eenduidig antwoord. Afhankelijk van wie je het vraagt, krijg je óf het advies om je custom lettertypes zelf te hosten óf om vast te houden aan externe (3rd-party) webfont services.

Hoewel het gebruik van diensten zoals Google fonts handig is, biedt het zelf hosten van webfonts betere font performance vanwege de volgende redenen:

• Je hoeft geen verbinding te maken met externe servers om je lettertypes bestanden op te halen, wat de totale laadtijd potentieel verkort. 
• Zelf hosten zorgt er ook voor dat lettertypes altijd correct worden weergegeven als de externe server van een webfont service problemen heeft of volledig uitvalt.
• Je kunt ‘font declaraties*’ inline in je HTML plaatsen of ze preloaden, zodat de browser van tevoren weet welke lettertype bestanden nodig zijn. 
• Je hebt meer controle over caching en andere strategieën om lettertypes sneller te laden.
• Door gebruik te maken van een CDN, kunnen je lettertype bestanden vanaf de dichtstbijzijnde locatie bij je bezoekers worden geserveerd.

*) Font declaraties zijn CSS regels die een specifiek lettertype definiëren en koppelen aan je webpagina, meestal via de @font-face declaratie.

@font-face {
  font-family: 'MijnFont'; /* Naam online lettertype */  
  src: url('mijnfont.woff2') format('woff2'),  
       url('mijnfont.woff') format('woff'); /* Locatie bestand */  
  font-display: swap; /* Voorkomt onzichtbare tekst (FOIT) */  
}

Er zijn echter ook mogelijke nadelen aan zelf hosten van online lettertypes:

• Je online lettertypes worden niet meer automatisch bijgewerkt, omdat ze niet meer van externe servers komen.
• Je moet meerdere bestandsformaten aanbieden en web-safe lettertypes als fallback declareren.

Een fallback is een backup lettertype dat de browser gebruikt als je primaire (custom) webfont niet laadt, faalt of bepaalde karakters mist. Hieronder een voorbeeld hoe dat eruit kan zien in CSS:

h1, h2, h3 {
font-family: "MijnFont", "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue" "Arial", sans-serif;   /* koptekst h1, h2 en h3 */  
}

#Voorkom mogelijke licentieproblemen bij het zelf hosten

Licenties vormen een ander aandachtspunt waarmee je te maken kunt krijgen, omdat verschillende webfonts services verschillende regels hanteren voor het lokaal hosten van lettertypes.

Sommige diensten (zoals Adobe/Typekit) verbieden het zelf hosten van lettertypes zonder aparte licentie, terwijl Google (en sommige andere diensten) een open licentie biedt voor webfonts waardoor je deze ook lokaal kunt hosten.

#Tools om je font performance te testen

Je hoeft niet te gokken waar het misgaat, er zijn genoeg tools die je kunnen helpen.

Handige tools en rapporten:

• Lighthouse en PageSpeed Insights tonen expliciet of webfonts je performance beïnvloeden en geven concrete aanbevelingen.
• GTmetrix laat zien welke webfont bestanden worden geladen, hoe groot ze zijn en wat de impact is op je totale laadtijd.
• WebPageTest geeft een waterval weergave van alle HTTP-requests, zodat je precies ziet wanneer je fonts binnenkomen en of ze het laadproces ‘blocken’.
• YellowLab Tools geeft direct inzicht in je webfont performance; het toont het aantal webfonts, grootte van de webfont bestanden en de totale HTTP-requests en impact op je site.
• In Chrome DevTools (Network-tab) kun je de bestandsgrootte en laadtijd zien van je webfonts, maar ook of ze het laadproces blokkeren.

Bij sommige van deze tools is het ook mogelijk om je pagina te testen op meerdere locaties, zodat je ziet hoe het inlezen van je custom lettertypes verschilt voor diverse doelgroepen wereldwijd.

#Manieren om font performance te verbeteren

Vanwege alle genoemde performance problemen met webfonts zijn er diverse manieren om de prestaties van je pagina te verbeteren als je webfonts gebruikt.

Hier zijn enkele strategieën die je zou kunnen overwegen:

#1. Verminder het aantal lettertypes

Minimaliseer het aantal lettertypes op je pagina zoveel mogelijk (twee of drie lettertypes is een goed aantal). Dit is vaak de beste manier om de impact van lettertypes op de prestaties van je pagina te verminderen.

Overweeg bijvoorbeeld om alleen regular (400) en bold (600) gewichten te selecteren om het aantal lettertypes te verkleinen. Als je pagina layout/design niet alle lettertype diktes (light, semi-bold, heavy, enz.) vereist, dan is er geen reden om ze te downloaden.

Voorbeeld: Vier diktes, inclusief de corresponderende cursieve/schuingedrukte variant, betekent acht HTTP-requests naar de server en 8 webfont bestanden downloaden. Dat is slecht voor laadtijd en design (verschuiving layout).

Voor een nog kleinere lettertype voetafdruk kun je de ‘browser bold styling’ (ook wel eens ‘faux bold’ genoemd) overwegen. Browser bold styling is wanneer een browser vetgedrukte letters zelf kunstmatig aanmaakt omdat het juiste bold/vetgedrukte webfont niet beschikbaar is. 

Maar .. pas wel op met browser bold styling. Het resultaat kan soms dikke, vage, onleesbare vlekken genereren in plaats van elegante, professioneel ontworpen vetgedrukte karakters of gliefen.

#2. Overweeg alternatieven voor je gewenste webfonts

Als er een web-safe lettertype is dat niet te ver afwijkt van je oorspronkelijke ontwerp, overweeg het dan te gebruiken in plaats van een online lettertype. Web-safe lettertypes zijn al aanwezig op de meeste apparaten, dus hoeven ze niet te worden gedownload. 

Ze verminderen ook de bandbreedte en het aantal HTTP-requests voor de pagina. Alles overziend hebben web-safe lettertypes de snelste laadtijden.

Belangrijkste web-safe lettertypes (universeel op Windows, macOS, Linux, mobiel):

Sans-serif (modern):

• Arial, Helvetica, sans-serif;
• Verdana, Geneva, sans-serif;
• Tahoma, Geneva, sans-serif;
• Trebuchet MS, Lucida Sans Unicode, sans-serif;
• Gill Sans, Gill Sans MT, Calibri, sans-serif;

Serif (klassiek):

• Times New Roman, Times, serif;
• Georgia, Times, Times New Roman, serif;
• Garamond, Palatino, Palatino Linotype, serif;

Monospace (code):

• Courier New, Courier, Lucida Sans Typewriter, monospace;

#3. Maak gebruik van system fonts

Maar je kunt ook kiezen voor ‘system fonts’, dit zijn lettertypes die in elk besturingssysteem (Windows, Apple, Linux, Android, etc) zitten ingebakken voor de interfaces die het systeem gebruikt.

body { 
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif; 
}

System fonts zijn 100% betrouwbare fallback als custom webfonts falen. Je hebt geen extra downloads en dus een minimale performance impact van je website.

#4. Optimaliseer je online lettertype bestanden

Dit houdt in dat je de grootte van je webfont bestanden zo klein mogelijk houdt en optimaliseert hoe ze worden geleverd. Enkele optimalisaties zijn:

• Het serveren van optimale formaten voor zelf-gehoste webfonts en ervoor zorgen dat alle webfonts zijn gecomprimeerd. WOFF2 is het aanbevolen formaat, met WOFF als fallback.
• Het inline plaatsen van je font-declaraties, zodat de browser van tevoren weet dat het lettertype nodig is. Het gebruik van preconnect voor je externe lettertypes om verbindingstijden te verkorten.

Let op: het preloaden van je lettertypes wordt ook gezien als een geldige optimalisatie strategie. Het kan echter verstandiger zijn om grotere en crucialere bestanden van tevoren te laten downloaden.

#5. Gebruik ‘variabele webfonts’

Een variabel webfont biedt meerdere gewichten en stijlen binnen één bestand, in plaats van aparte bestanden te downloaden voor elk. Gewicht, breedte en cursief pas je dynamisch aan met CSS, zonder extra bestanden te laden. 

Het grote voordeel is dat je website minder HTTP-requests hoeft te doen om alle ‘losse’ lettertype bestanden te downloaden en een variabel webfont heeft een kleinere bestandsgrootte. Gebruik één variabel font voor je hele site, regular (350-650) voor body en koppen.

#6. Overweeg font subsetting

Font subsetting houdt in dat je alleen de karaktersets of talen selecteert die je daadwerkelijk gebruikt en ongebruikte karakters uit het lettertype bestand verwijdert. Lettertypes bevatten vaak ondersteuning voor talen, karakters en geavanceerde typografische functies (bijvoorbeeld symbolen of ligatures).

In veel gevallen heb je echter slechts een fractie van deze karakters nodig voor je website. Het verwijderen van talen of karaktersets (bijv. Cyrillisch, Hebreeuws, wiskundige symbolen, enz.) die niet worden gebruikt, zal de bestandsgrootte van je webfont verkleinen.

Veel webfont diensten bieden ingebouwde subsetting opties om ongewenste karakters te verwijderen. Maar je kunt ook Font subsetter of Fontly gebruiken om subsets te maken. Op die manier kan je de bestandsgrootte van je lettertypes verkleinen door alleen de benodigde tekens op te nemen.

Een kleiner lettertype bestand downloadt sneller voor je bezoekers en verbetert de laadtijd en daarmee de gebruikerservaring (UX) van je bezoekers.

Enkele aandachtspunten:

• Als je je lettertypes subset, controleer dan of er geen ontbrekende karakters zijn die je wél nodig hebt op je website; anders worden ze mogelijk met fallback lettertypes weergegeven.
• Zorg ervoor dat je licentie van het lettertype subsetting toestaat, anders overweeg alternatieve lettertype hostingdiensten (bijv. Google Fonts).

#7. Cache je lettertype bestanden efficiënt

Stel lange Cache-Control-headers in voor fontbestanden, zodat terugkerende bezoekers ze niet onnodig opnieuw hoeven te downloaden. Stel een lange max-age in (bijv. 31,536,000 seconds ≈ 365 days ≈ 1 jaar) omdat lettertypes zelden veranderen. Hier een voorbeeld hoe je jouw .htaccess bestand op een Apache server kunt instellen:

  Header set Cache-Control "public, max-age=31536000, immutable"
  Header set Access-Control-Allow-Origin "*"

#8. Gebruik “performance-focused” webfonts

Webfonts die voor performance zijn gemaakt, zijn lettertypes die bewust zijn ontworpen om snel te laden, scherp te renderen en betrouwbaar te werken op verschillende apparaten en browsers. Performance wordt hierbij gezien als een ontwerpeis, niet als een bijzaak.

Enkele lettertypes die zijn ontworpen met performance in gedachten:

• Inter
• Roboto
• Noto Sans
• Source Sans 3

#9. Preload je Above-the-fold webfonts

Preload alleen de lettertypes voor de above-the-fold content (max. 2 à 3 webfonts). Webfonts uit de above-the-fold content, die niet worden ge-preload kunnen ook layout verschuivingen veroorzaken, wat schadelijk is voor je Core Web Vitals score (CLS).

<link rel="preload" href="https://domeinnaam.nl/../fonts/mijnfont.woff2" as="font" type="font/woff2" crossorigin>  

#Voordelen van een goede font performance

Een goede font performance levert vrijwel direct rendement op, hier staan alle belangrijke voordelen op een rijtje:

• Snellere laadtijd: Pagina’s laden 100-500 ms sneller (LCP).
• Stabiele layout: geen layout verschuivingen door FOIT/FOUT (CLS).
• Betere leesbaarheid: Tekst zichtbaar en leesbaar vanaf seconde één.
• Hogere conversie: Minder bounce (tot 24% daling), langere sessies
• Verbeterde SEO: Betere Core Web Vitals scores en performance.

#Maar .. wat kun je zelf het best doen?

Een externe webfont service of zelf hosten? Kies altijd voor het laden van lettertypes die, binnen jouw mogelijkheden, de meest optimale prestaties bieden voor je website. Maar mijn professionele advies zou zijn om zelf je lettertypes te hosten, .. daar waar mogelijk.

Maar houd wel rekening met implementatie eisen (zoals CDN, licenties, cache, enz.) en de inspanning qua development die nodig is voor beide methoden. Test ook beide strategieën op een staging omgeving (bijvoorbeeld in WAMP of Local WP). Vergelijk de resultaten en kies de methode die het beste evenwicht biedt tussen prestaties, implementatie en kosten.

Bottomline

Webfonts zijn essentieel voor je website, niet alleen vanwege design maar ook vanwege hun impact op de laadtijd van je website. Het gebruik van lettertypes zonder aandacht voor font performance kan veel problemen veroorzaken voor de laadtijd van je website.

Verminder het aantal lettertypes, optimaliseer de laadstrategie en test je webfonts op een staging-omgeving voordat je ze live zet om optimale prestaties te garanderen. Heb je nog steeds problemen met je font performance? Neem dan contact met me op.

Auteur: Jan Rajtoral (AKA Gonzo the Great)

Jan Rajtoral is een ervaren grafische vormgever en webdesigner. Hij heeft een ruime ervaring met Front-end web design (HTML, CSS en JS/jQuery), User Experience (UX), Toegankelijkheid (WCAG), Performance en WordPress Ontwikkeling & Thema Ontwerp. Maar hij ontwerpt en ontwikkelt ook logo’s en huisstijlen, waarbij hij altijd streeft naar merkconsistentie in het hele ontwerp.