Hoe Google Fonts lokaal vanaf je site inladen?

Laad je Google Fonts lokaal in en verbeter zo je site snelheid en de privacy van je bezoekers.

Inhoudsopgave

Heel veel Duitse ondernemers kregen recent een mailtje met een vriendelijke uitnodiging tot betaling. Een Duitse advocaat stuurde die omdat hun cliënt “schade heeft opgelopen”. Ze bezochten de site van de ondernemer waarop Google Fonts werden ingeladen.

Het is zo dat er in Duitsland begin dit jaar een vonnis was waarin staat dat de Google Fonts dienst niet voldoet aan de GDPR. Als je op de “aanbevolen” manier hun lettertypes inlaadt, dan deel je als bezoeker op de site je IP-adres met Google. Meer details kan je hier lezen:

Hoe controleren of je site Google Fonts gebruikt?

Er zijn meerdere plekken waar je site dit kan inladen. Ik geef je enkele methodes hoe je dit kan onderzoeken.

De makkelijkste manier om dit te controleren is kijken in de broncode van je site:

  1. Open de homepage van je website.

  2. Rechtsklik op de pagina en kies voor “Paginabron bekijken”

    Dit opent de broncode van je pagina.

  3. Zoek naar “fonts.gstatic.com” of “fonts.googleapis.com”

    De standaard methode om Google Fonts in te laden, is via een HTML <link> element. Voorbeeld:
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet"    >

Als je minstens 1 “match” hebt, dan weet je met zekerheid dat je site Google Fonts op deze manier inlaadt.

Naast de <link> optie is er ook nog een andere (oudere) manier hoe je Google fonts kan inladen. Dat is met een CSS @import regel. Een voorbeeld:

<style>
@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
</style>

Om dit terug te vinden, moet je in de bestanden van je WordPress thema duiken. In de meeste gevallen zijn deze regels code te vinden in het style.css bestand.

Om dit te gaan zoeken, ga je naar Weergave > Thema bestand editor. Op dit scherm zie je rechts alle bestanden van je actief thema, waarin ook style.css staat. Klik daar op en dan kan je in het bestand een zoekopdracht doen met de sneltoets “CTRL+F” op Windows of “CMD+F” op Mac. Zoek hier ook naar “fonts.googleapis.com” en kijk of je een match hebt.

Hoe kan je het oplossen?

Er zijn meerdere methodes om dit aan te pakken.

Switch naar systeemlettertypes

Kijk of je WordPress thema instellingen heeft waar je je lettertypes kan kiezen. Als dat zo is, raad ik je gewoon aan om een “systeemlettertype” te kiezen. Zo’n lettertype is al standaard op de meeste computers geïnstalleerd. Zo los je niet alleen dit probleem op, maar versnel je ook nog je website.

Ikzelf gebruik graag https://systemfontstack.com/.

Laad Google Fonts lokaal in vanaf je site

Je kan dit op 2 manieren doen.

De technische oplossing is de Google Fonts downloaden en converteren naar web fonts. Dit kan je doen met de tool van Font Squirrel: https://www.fontsquirrel.com/tools/webfont-generator.

Daarna upload je de bestanden naar je thema map en verwijs je in je thema style.css naar de lokale locatie van je webfonts. Bij de download van Font Squirrel zit ook een CSS bestand waarin de font-face CSS regels staan die je kan overnemen.

De makkelijkere manier is, hoe kan het ook anders, een WordPress plugin. De plugin die ik hiervoor gebruik is OMFG (voluit Optimize my Google Fonts) van ontwikkelaar Daan van den Bergh uit Nederland. De plugin kan je hier downloaden: https://wordpress.org/plugins/host-webfonts-local/.

Eens de plugin geïnstalleerd is, kan je via het extra menu item onder Instellingen je site laten doorzoeken op Google Fonts. De plugin is erg goed in het automatisch detecteren van Google Fonts in je plugins en thema’s. Eens gedetecteerd kan je dan nog kiezen wat je er mee wilt doen. Je kan kiezen om het lokaal in te laden of gewoon niet in te laden. In de Pro versie kan je ook kiezen om er een fallback lettertype aan te koppelen.

Heb je nog andere Google diensten op je site?

Nu we het over Google diensten hebben op je site zou ik je er ook graag aan herinneren dat Google Fonts niet de enige dienst van Google is die iets doet met persoonsgegevens. Denk even na of je geen andere diensten op je site van Google hebt geïntegreerd.

Denk hierbij vooral aan Google Analytics die ik op héél veel sites zie, maar ook Google Tag Manager, Google reCAPTCHA, … Wees je ervan bewust dat je in de meeste gevallen persoonsgegevens doorsluist naar Google en dat je vooraleer je deze diensten op je site inlaadt, je expliciet toestemming moet hebben van je site bezoeker.

Disclaimer: Deze blogpost bevat geen juridisch advies. Als je juridisch advies nodig hebt, raad ik je aan om een jurist of advocaat in te schakelen die kennis heeft van de GDPR/AVG.

2 reacties

Hey Jeroen! Bedankt voor het noemen van m’n plugin 🙂 Ik heb onlangs overigens een leuke feature toegevoegd, die je ook een waarschuwing geeft als je iframes inlaadt op je site die Google Fonts inladen, zoals Google Maps, Youtube en Recaptcha.

Een reactie achterlaten

Gerelateerde berichten