Zo voorkom je met WordPress het extern inladen van Google fonts

Begin dit jaar was er al een Uitspraak van LG München betreffende Google Fonts die van externe Google-servers worden geladen. Hier werd geoordeeld dat dit om redenen van gegevensbescherming niet is toegestaan. Om verder niet in te gaan op de vraag of de uitspraak verstandig of begrijpelijk is kunnen we er wel één toevoeging aan doen: er zijn namelijk niet alleen redenen op het gebied van gegevensbescherming om fonts lokaal in te laden, het heeft ook een positief effect op de performance!

Maar! wat kun je doen als je zo’n waarschuwing krijgt?

Controleer of Google Fonts extern zijn geladen

Je kan zelf eenvoudig controleren of jouw website Google Fonts echt extern laadt. Je kan dit doen via het Developer Console of de Developer Tools (Ctrl + Shift. + I of F12) van jouw browser. In Chrome vindt je de informatie in het tabblad “Broncode”, in Firefox kun je via het tabje netwerkanalyse zien of en welke lettertypen worden geladen.

De ontwikkelaarstools van Chrome laat zien dat er een Google Font geladen is. Als alternatief zijn er enkele websites die jou vertellen of jouw website Google Fonts inlaadt:

https://www.e-recht24.de/google-fonts-scanner
https://webbkoll.dataskydd.net/de/
https://sicher3.de/google-fonts-checker/

Opmerking: Zowel de console als de externe diensten controleren alleen de URL die je invoert. Dus een controle geeft geen uitsluiting of je ergens anders op een subpagina Google Fonts gebruikt.  Overweeg of je bepaalde pagina’s of berichten apart moet controleren omdat daar mogelijk andere “functionaliteiten” gebruikt zijn, zoals contactformulieren, popups, sliders en dergelijke.

Google-lettertypen blokkeren

Zoals gebruikelijk zijn er voor WordPress altijd verschillende manieren om een probleem op te lossen. Voor wie liever niet handmatige wijzigingen maakt laten wij de eenvoudige methode zien door middel van een plugin.

Plugins die Google Fonts blokkeren

Local Google Fonts en OMGF hebben beide het voordeel dat ze niet alleen het laden van externe lettertypes voorkomen, maar tegelijkertijd ook de lokaal gebruikte lettertypes integreren, zodat er niets verandert aan het uiterlijk van jouw website. Het enige verschil is dat de Google Fonts nu lokaal worden opgeslagen en van daaruit worden geladen. Er is geen verbinding meer met de servers van Google Fonts.

Als je alleen de Google Fonts wilt blokkeren en ze lokaal handmatig wilt integreren, kun je ook de Font Blocker van Borlabs gebruiken. Sommige cache- of optimalisatieplug-ins bieden ook de mogelijkheid om Google Fonts te blokkeren, een voorbeeld daarvan is Autoptimize

Opties voor thema’s en plugins

Intussen bieden veel thema’s en ook sommige plugins al de optie om het laden van Google Fonts en/of het laden van lokaal opgeslagen fonts te voorkomen. Kijk dus in de documentatie van jouw thema of neem contact op met de ontwikkelaars of de bijbehorende ondersteuningsforums. Vaak ben je niet de enige die daarbij hulp zoekt.

Google Fonts handmatig blokkeren

Natuurlijk is er ook de mogelijkheid om het laden van Google Fonts te blokkeren via de functions.php van jouw child-thema.

Voor de standaard WordPress-thema’s is de benodigde code als volgt:

add_action( 'wp_print_styles', 'remove_google_fonts', 1);
function remove_google_fonts() {
wp_dequeue_style( 'twentyseventeen-fonts' );
}

Daarbij moet je de $handle hanteren (hier twentyseventeen-fonts), afhankelijk van het gebruikte thema.

Enkele voorbeelden:

• Twenty Seventeen – twentyseventeen-fonts
• Divi – divi-fonts
• Genesis Sample – genesis-sample-fonts

Als dat niet werkt, raad ik u aan op Google te zoeken naar “remove google fonts + “naam thema””

Controleer

Welke manier je uiteindelijk kiest om het extern laden van Google Fonts te stoppen, controleer achteraf of het heeft gewerkt.
Daarnaast een kanttekening, externe inhoud die via iFrames op jouw website worden geladen kan niet worden beïnvloed via de bovengenoemde methoden.

Mocht je vragen hebben over dit topic neem dan gerust contact met ons op!