Fonts sneller laden in WordPress

Fonts sneller laden in WordPress begint met minder, kleinere en beter geprioriteerde fontbestanden. Gebruik bij voorkeur WOFF2, laad alleen de families, gewichten en stijlen die werkelijk op de pagina voorkomen, stel font-display in en preload uitsluitend een kritisch fontbestand. Controleer daarna in Chrome DevTools of je geen dubbele of onnodige fontrequests meer verstuurt.

Webfonts zijn belangrijk voor je merkuitstraling, maar kunnen de zichtbaarheid van tekst vertragen. Ook kunnen ze bijdragen aan verschuivende lay-out als het uiteindelijke lettertype andere afmetingen heeft dan het tijdelijke fallback-font. Dit raakt de ervaren snelheid en kan invloed hebben op metrics zoals FCP, LCP en CLS.

Waarom vertragen fonts je website?

Een browser moet een fontbestand eerst ontdekken, downloaden en verwerken voordat tekst met dat font kan worden weergegeven. Bij externe fonts komt daar vaak nog een verbinding met een ander domein bij. Het probleem wordt groter wanneer een WordPress-thema, page builder of plugin meerdere families, gewichten en varianten inlaadt die bezoekers op een specifieke pagina niet nodig hebben.

Veelvoorkomende oorzaken zijn:

• meerdere fontfamilies voor koppen, lopende tekst en formulieren;
• onnodige gewichten, zoals extra lichte, zware en cursieve varianten;
• verouderde formaten naast WOFF2;
• dezelfde fonts vanuit zowel een thema als een plugin;
• icon fonts die op iedere pagina een compleet icoonpakket laden;
• extern geladen Google Fonts zonder bewuste laadstrategie.

Fontoptimalisatie is één onderdeel van bredere websiteperformance. Combineer dit daarom met het verkleinen van afbeeldingen. Lees ook onze gids over afbeeldingen optimaliseren in WordPress.

Fonts sneller laden: praktisch stappenplan

1. Maak een inventarisatie van alle fontrequests. Open een belangrijke pagina in Chrome, ga naar DevTools en kies in het Network-overzicht het filter Font. Noteer per bestand de familienaam, bestandsindeling, herkomst en of het bestand op die pagina wordt gebruikt.
2. Schrap wat niet nodig is. Beperk het aantal families en laad alleen gebruikte gewichten en stijlen. Controleer ook mobiele navigatie, formulieren, pop-ups en page-buildermodules: die kunnen eigen fonts toevoegen.
3. Kies WOFF2 als voorkeursformaat. WOFF2 is bedoeld voor efficiënte levering van webfonts. Behoud andere formaten alleen als je daar een onderbouwde compatibiliteitsreden voor hebt.
4. Maak subsets wanneer je tekenset beperkt is. Een subset bevat alleen de tekens die je nodig hebt. Voor een Nederlandstalige zakelijke site kan dat anders zijn dan voor een site met meerdere talen of veel speciale tekens. Test altijd of namen, accenten, formulieren en dynamische content goed blijven werken.
5. Overweeg een variabel font. Een variabel font kan meerdere gewichten of stijlen binnen één bestand bieden. Dat is niet automatisch de beste keuze: vergelijk het werkelijke bestand en de daadwerkelijk gebruikte assen met losse bestanden.
6. Host fonts bewust lokaal of beoordeel externe levering. Lokale hosting geeft meer controle over bestanden en caching. Externe levering kan extra verbindingen en afhankelijkheden toevoegen. Kies op basis van je huidige configuratie en meet het resultaat.
7. Stel @font-face en font-display in. Daarmee bepaal je hoe de browser met tekst omgaat zolang het webfont nog niet beschikbaar is.
8. Preload hooguit het kritieke font. Preload is een prioriteitssignaal, geen standaardoplossing voor ieder font. Preload alleen een klein fontbestand dat direct zichtbaar is, bijvoorbeeld het reguliere font voor de tekst boven de vouw.
9. Test na elke wijziging. Controleer de waterfall, de zichtbaarheid van tekst en eventuele lay-outverschuivingen. Test ook ingelogd en uitgelogd, op mobiel en met een lege cache.

Scorecard: welke fontmaatregel past bij jouw situatie?

Situatie in je WordPress-site	Controle in DevTools of WordPress	Passende actie	Waar je op let
Meerdere bestanden voor gewichten die nergens zichtbaar zijn	Vergelijk fontrequests met de typografie-instellingen van thema en page builder	Verwijder ongebruikte gewichten en cursieve varianten	Controleer koppen, knoppen, formulieren en mobiele menu’s
Fonts worden als externe Google Fonts geladen	Bekijk de domeinen in de Network-waterfall	Beoordeel lokaal hosten of voeg alleen voor noodzakelijke externe herkomst preconnect toe	Voorkom dubbele laden via thema, plugin en page builder
Tekst blijft tijdelijk onzichtbaar	Controleer de @font-face-regel en Lighthouse-meldingen	Gebruik een passende font-display-waarde, vaak swap	Een zichtbare fallback kan kort een andere uitstraling hebben
De eerste kop of bodytekst verschijnt laat	Bekijk of het benodigde font pas laat in de waterfall wordt ontdekt	Preload uitsluitend het kritieke WOFF2-bestand	Preload geen fonts die niet direct zichtbaar of niet zeker nodig zijn
Tekst verspringt nadat het webfont is geladen	Controleer CLS-diagnostiek en vergelijk fallback met eindfont	Kies een beter passend fallback-font en gebruik waar passend metric overrides	Test alle viewportformaten en dynamische componenten
Een icon font wordt sitebreed geladen voor enkele iconen	Zoek het fontbestand en de bronplugin in de waterfall	Beperk de iconset of vervang losse iconen door SVG	Behoud toegankelijke labels en een consistente weergave

WOFF2, subsetting en variabele fonts

De bestandskeuze bepaalt hoeveel data de browser moet verwerken. WOFF2 is het gebruikelijke moderne webfontformaat. Daarna is het vooral zaak om niet meer tekens, gewichten en stijlen te leveren dan je site nodig heeft.

Subsetting kan nuttig zijn als een font veel alfabetten bevat die je niet gebruikt. Let wel op: een te agressieve subset veroorzaakt ontbrekende tekens in klantnamen, citaten, formulieren of content die later wordt toegevoegd. Gebruik je een variabel font, laad dan alleen de variaties die je ontwerp nodig heeft en verifieer dat dit in jouw situatie niet zwaarder uitpakt dan losse bestanden.

Fonts lokaal hosten of extern laden?

Bij lokaal hosten staan de fontbestanden op je eigen domein. Dat maakt het eenvoudiger om bestandsselectie, caching en de laadvolgorde te beheren. Extern laden kan een extra domeinverbinding vereisen. Welke route het beste is, hangt af van de bron van je fonts, je thema, plugins en de huidige netwerkrequests.

Gebruik je Elementor of een andere page builder? Controleer dan eerst de ingebouwde typografie- en performance-instellingen. Zet niet blind een tweede fontplugin in: die kan dezelfde fonts opnieuw toevoegen. Kijk daarnaast in je actieve thema en optimalisatieplugin. Het doel is één duidelijke bron per fontbestand.

@font-face en font-display goed instellen

Een goede @font-face-regel verwijst naar het juiste bestand, gebruikt het juiste gewicht en voorkomt dat de browser onnodig meerdere formaten hoeft te proberen. Met font-display bepaal je hoe snel tekst zichtbaar mag worden tijdens het laden van het webfont.

@font-face {
  font-family: 'Bedrijfsfont';
  src: url('/wp-content/uploads/fonts/bedrijfsfont-regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

font-display: swap zorgt ervoor dat tekst eerst met een fallback-font kan verschijnen en later wisselt naar het webfont. Dat voorkomt onzichtbare tekst, maar kan wel een korte stijlwisseling geven. Kies daarom een fallback die qua breedte en hoogte zo goed mogelijk aansluit. Wanneer de wisseling alsnog lay-outverschuiving veroorzaakt, kunnen font metric overrides een technische oplossing zijn. Laat die zorgvuldig implementeren en test ze visueel.

Preload en preconnect: alleen gebruiken met een duidelijke reden

Met preload vertel je de browser dat een specifiek bestand vroeg nodig is. Dit is vooral geschikt voor een font dat nodig is voor direct zichtbare tekst. Een preload-tag voor een lokaal gehost WOFF2-bestand kan er zo uitzien:

<link rel="preload"
      href="/wp-content/uploads/fonts/bedrijfsfont-regular.woff2"
      as="font"
      type="font/woff2"
      crossorigin>

Het crossorigin-attribuut helpt voorkomen dat de browser het font dubbel ophaalt door verschillen in de aanvraagmodus. Voeg niet zomaar preload-tags toe voor alle gewichten en icon fonts. Daarmee geef je bestanden voorrang die mogelijk niet kritiek zijn, terwijl afbeeldingen, CSS of andere belangrijke bronnen moeten wachten.

preconnect kan passend zijn wanneer een essentieel font vanaf een extern domein komt. Is lokaal hosten mogelijk, dan is preconnect doorgaans niet nodig voor je eigen fontbestanden. Meet altijd wat de wijziging doet in de daadwerkelijke waterfall.

Dubbele fonts uit thema’s, plugins en page builders voorkomen

WordPress-websites hebben geregeld meer dan één bron voor typografie. Een thema kan Google Fonts laden, terwijl Elementor dezelfde familie toevoegt en een formulierplugin nog een extra gewicht inlaadt. Het gevolg: dubbele requests of meer bestanden dan nodig.

Werk deze controle af:

• controleer de typografie-instellingen van je thema;
• controleer globale fonts en Google Fonts-instellingen in je page builder;
• bekijk optimalisatieplugins die fonts combineren, uitstellen of lokaal kopiëren;
• zoek in DevTools op dezelfde familienaam en vergelijk de bestands-URL’s;
• controleer na updates opnieuw, want een thema- of pluginupdate kan de laadwijze wijzigen.

Technische optimalisatie vraagt om een website waarin ontwerp, content en bouw op elkaar aansluiten. Bekijk hoe strategisch en creatief webdesign daarbij helpt, of ontdek alle diensten van LYNX Media.

Icon fonts: beperken of vervangen door SVG

Een icon font kan handig zijn, maar is inefficiënt als je slechts een paar iconen gebruikt en toch een volledige set inlaadt. Onderzoek in de waterfall of een icon font op iedere pagina wordt gedownload. Voor losse, statische iconen kan SVG een passend alternatief zijn. Houd daarbij rekening met toegankelijkheid: decoratieve iconen en iconen met functionele betekenis vragen om een andere implementatie.

FOIT, FOUT en layout shifts oplossen

FOIT betekent dat tekst tijdelijk onzichtbaar blijft tijdens het laden van een webfont. FOUT betekent dat tekst eerst in een fallback-font verschijnt en later wisselt. Voor bezoekers is zichtbare tekst meestal beter dan wachten op een perfect lettertype, maar een slechte fallback kan een zichtbare verspringing opleveren.

Pak dit in deze volgorde aan:

1. verklein en beperk de benodigde fontbestanden;
2. zorg dat tekst zichtbaar kan blijven met font-display;
3. kies een fallback met vergelijkbare proporties;
4. controleer of het uiteindelijke font een lay-outverschuiving veroorzaakt;
5. pas alleen wanneer nodig technische metric overrides toe.

Onverklaarbare verschuivingen kunnen ook andere oorzaken hebben, zoals afbeeldingen zonder vaste afmetingen, banners of dynamische elementen. Los bovendien technische fouten op die een goede gebruikerservaring en crawlbaarheid in de weg zitten, bijvoorbeeld met deze gids voor 404- en soft-404-fouten.

Resultaat controleren

Een score in een testtool is geen einddoel. Controleer vooral of de browser minder en kleinere fontbestanden ophaalt, of tekst snel zichtbaar is en of de pagina stabiel blijft.

• Chrome DevTools Network: filter op Font, bekijk initiator, grootte, prioriteit, timing en dubbele requests.
• Lighthouse: controleer aanbevelingen rond zichtbare tekst tijdens het laden van webfonts.
• PageSpeed Insights: gebruik dit als aanvulling op je analyse en beoordeel de veldgegevens afzonderlijk van de labtest.
• Visuele controle: laad de pagina met een lege cache en let op onzichtbare tekst, een onverwachte fontwissel en verspringende content.

Checklist voor snellere fonts in WordPress

• Gebruik alleen noodzakelijke fontfamilies, gewichten en stijlen.
• Gebruik WOFF2 voor de webfonts die je levert.
• Overweeg subsetting, maar controleer alle benodigde tekens.
• Voorkom dat thema, page builder en plugins dezelfde fonts laden.
• Stel per font een bewuste font-display-strategie in.
• Preload alleen een font dat direct zichtbaar en echt kritiek is.
• Gebruik preconnect alleen als een noodzakelijke externe fontbron dat rechtvaardigt.
• Beperk icon fonts of vervang passende losse iconen door SVG.
• Controleer waterfall, tekstweergave en lay-outstabiliteit na elke wijziging.
• Test opnieuw na een update van thema, page builder of optimalisatieplugin.

Wil je fontloading, ontwerpkeuzes en de technische basis van je WordPress-site in samenhang verbeteren? Bespreek je website of online groeikansen met LYNX Media.