Bijna elk WordPress-thema gebruikt lettertypen van Google Fonts. Handig, gratis en mooi. Maar bij elk bezoek aan uw website maakt de browser van de bezoeker verbinding met de servers van Google om die lettertypen op te halen. Dat kost laadtijd, en het stuurt het IP-adres van uw bezoeker naar Google, zonder dat die daar iets over te zeggen heeft.

Door Google Fonts lokaal te hosten, lost u beide problemen tegelijk op. De lettertypen komen dan gewoon van uw eigen server, net als uw afbeeldingen. Dit artikel legt uit waarom dat verstandig is en hoe u het regelt, ook als uw thema of paginabouwer de lettertypen zelf inlaadt.

Waarom dit twee problemen tegelijk oplost

Snelheid. Als de browser lettertypen bij Google moet ophalen, moet hij eerst een verbinding opzetten met een ander domein: DNS opzoeken, een beveiligde verbinding opbouwen, dan pas het bestand ophalen. Dat gebeurt twee keer, want Google gebruikt aparte domeinen voor het stylesheet en voor de lettertypebestanden zelf. Op een snelle verbinding scheelt het misschien tweehonderd milliseconden; op mobiel kan het oplopen tot een halve seconde. Bovendien blokkeert het stylesheet vaak het weergeven van tekst, wat direct meetelt in de Largest Contentful Paint.

Privacy. In januari 2022 oordeelde een Duitse rechter dat het laden van Google Fonts zonder toestemming een inbreuk is op de AVG, omdat het IP-adres van de bezoeker naar Google in de Verenigde Staten wordt gestuurd. Sindsdien zijn in Duitsland en Oostenrijk veel sitebeheerders aangeschreven. In Nederland is de handhaving minder actief, maar de juridische redenering is dezelfde. Lokaal hosten haalt het onderwerp van tafel.

Een derde, kleiner voordeel: uw site werkt ook goed als Google een storing heeft of als een bezoeker een adblocker gebruikt die verbindingen naar Google blokkeert.

Stap 1: ontdek welke lettertypen uw site laadt

Open uw website in Chrome, druk op F12, ga naar het tabblad Netwerk en filter op “Font” of zoek op “fonts.googleapis”. U ziet dan welke lettertypen en welke diktes worden opgehaald. Vaak zijn dat er meer dan u verwacht: een thema laadt bijvoorbeeld zeven varianten van Open Sans terwijl de site er twee gebruikt.

Noteer de naam van elk lettertype en de diktes die daadwerkelijk zichtbaar zijn. Meestal volstaan regular (400) en bold (700), soms een cursief. Elke variant die u niet meeneemt, is een bestand minder om te laden.

Stap 2: kies de manier die bij uw site past

Er zijn grofweg drie routes. Welke u kiest, hangt af van wie de lettertypen inlaadt: het thema, een paginabouwer of een plugin.

Route A: uw thema of paginabouwer heeft een ingebouwde optie

Steeds meer thema’s en paginabouwers bieden een schakelaar om Google Fonts lokaal te laden. Elementor heeft die sinds versie 3.x onder Instellingen → Geavanceerd (“Google Fonts lokaal laden”). Divi heeft een vergelijkbare optie onder de prestatie-instellingen. Thema’s als GeneratePress, Kadence en Astra bieden het ook. Dit is de eenvoudigste route: één schakelaar, klaar.

Route B: een plugin die het voor u regelt

Plugins als OMGF (Optimize My Google Fonts) of de lettertypefunctie van sommige cacheplugins zoeken de Google Fonts-verwijzingen op, downloaden de bestanden naar uw server en herschrijven de verwijzingen. OMGF heeft een gratis versie die voor de meeste sites voldoende is. Controleer na activatie wel in het netwerktabblad of er echt geen verbinding met Google meer wordt gemaakt; sommige plugins of widgets laden lettertypen via een omweg die de plugin niet ziet.

Route C: handmatig in uw child-thema

De schoonste route, maar het vraagt iets meer werk. Download de lettertypebestanden (bijvoorbeeld via de google-webfonts-helper, een gratis online tool) als WOFF2, zet ze in een map in uw child-thema en voeg de bijbehorende @font-face-regels toe aan uw stylesheet. Schakel daarna de originele Google Fonts-verwijzing van het thema uit. Dit is de aanpak die wij gebruiken bij sites waar wij volledige controle willen, en het voorkomt dat een plugin-update de instelling ongedaan maakt.

Stap 3: controleer en optimaliseer

Na het omzetten controleert u drie dingen:

  1. Geen verbinding meer met Google. Vernieuw het netwerktabblad; er mag geen enkel verzoek naar fonts.googleapis.com of fonts.gstatic.com meer staan. Vergeet niet ook een pagina met een formulier, een slider of een kaart te testen; daar zitten vaak verborgen verwijzingen.
  2. De lettertypen zien er hetzelfde uit. Vergelijk een pagina vóór en na. Als een dikte ontbreekt, valt de browser terug op een nagebootste versie die er net iets anders uitziet.
  3. font-display staat op swap. Deze CSS-eigenschap zorgt dat tekst direct zichtbaar is in een tijdelijk lettertype en pas wisselt als het echte lettertype geladen is. Zonder die instelling ziet de bezoeker even een lege plek waar tekst hoort te staan.

Als u toch bezig bent: overweeg een preload-regel voor het belangrijkste lettertypebestand, zodat de browser het meteen bij het laden van de pagina ophaalt. Dat helpt vooral de LCP als de grootste zichtbare tekst in dat lettertype staat. Meer over dat onderdeel leest u in ons artikel over het verbeteren van de LCP.

Veelgemaakte fouten

  • Alle diktes meenemen. Het thema laadde er zeven, dus u zet er zeven lokaal. Nu heeft u wel de privacy geregeld, maar niet de snelheid. Beperk het tot wat u gebruikt.
  • De originele verwijzing laten staan. Lokaal hosten én nog steeds Google aanroepen is het slechtste van twee werelden.
  • Vergeten dat plugins ook lettertypen laden. Formulierplugins, sliders, cookiebanners en ingesloten Google Maps laden regelmatig hun eigen lettertypen.
  • Systeemlettertypen niet overwegen. Voor veel zakelijke websites is een systeemlettertype (zoals de standaardfont van Windows of macOS) prima leesbaar en laadt het in nul milliseconden. Het is geen schande om lettertypen helemaal te schrappen.

Wat u zelf kunt doen en wanneer u hulp inschakelt

Route A kunt u vrijwel altijd zelf. Route B ook, mits u na afloop goed controleert. Route C vraagt om enige ervaring met CSS en een child-thema; als u daar niet vertrouwd mee bent, laat u het liever doen. Wij nemen het lokaal hosten van lettertypen standaard mee bij een snelheidsoptimalisatie van uw website, samen met de andere maatregelen die de laadtijd beïnvloeden. Voor wie het alleen om de AVG-kant gaat, is het ook los prima te regelen.

Een fictief voorbeeld ter illustratie: een fysiotherapiepraktijk in Haarlem laadde negen varianten van twee Google-lettertypen via het thema, plus nog twee via een afsprakenplugin. Na het beperken tot drie lokaal gehoste varianten en het schrappen van de rest daalde het aantal externe verzoeken op de homepage van 41 naar 12 en de tijd tot zichtbare tekst met ruim een halve seconde op mobiel. De privacyverklaring kon een alinea korter.

Conclusie

Google Fonts lokaal hosten is een van de weinige maatregelen die snelheid én privacy tegelijk verbeteren, met weinig risico. Begin met het netwerktabblad, kies de route die bij uw thema past en controleer na afloop dat er echt geen verzoek naar Google meer overblijft. Het is een klus van een uur die u daarna jaren geen omkijken meer geeft, zolang u na thema-updates even controleert of de instelling nog staat.