Google Fonts API en de GDPR – Lig er gerust wakker van!

Google Fonts API en de GDPR – Een nachtmerrie voor webbouwers!

Als webbouwer en als webeigenaar wil je natuurlijk zo min mogelijk te maken hebben met allerlei juridische complicaties rond het hebben van een website. Realiteit is echter, dat je sinds de GDPR hier niet meer aan kan ontkomen. Na jaren trouwe dienst heb ik onlangs MailChimp vaarwel gezegd, omdat MailChimp zich helaas niet aan wilde passen aan de Europese regelgeving en zoals ik eerder al heb aangegeven in een ander blogartikel, staat Google met al zijn diensten op dit moment ook behoorlijk ter discussie. Eén van mijn redenen om een complete cursus rond de Google Marketing Suite die al was ingepland te annuleren. Ik laat mensen niet voor cursussen betalen, voor een dienst die straks mogelijk niet meer gebruikt kan worden.

Een wat minder voor de hand liggend gevaar -maar toch wel iets om heel serieus te nemen- is het gebruik van de Google Fonts API, een grote bibliotheek met meer dan duizend fonts die je gratis kan gebruiken.

In Oostenrijk en Duitsland zijn de eerste boetes in het kader van de Google Fonts API en de GDPR gegeven. Nu is men in Duitsland behoorlijk wat strenger met betrekking tot de naleving van de GDPR dan in Nederland, maar toch, je wilt het risico niet lopen, toch?

Maar wat is nu eigenlijk dat probleem met de Google Fonts API en de GDPR. Ik moet eerlijk zeggen, dat ik het verhaal over de Duitse boetes ook een paar keer moest lezen voor ik het goed begreep.

Wat het probleem met Google en Privacy is heb ik in het eerder genoemde artikel over Google Analytics al geschreven. En in eerste instantie lijkt niets van dat alles van toepassing op het gebruik van de Google Fonts API. En ik moet toegeven, het is vergezocht. Maar aangezien voorkomen beter dan genezen is, is het toch goed om hier even bij stil te staan.

Hoe werkt de Google Fonts API

De Google Fonts API bestaat uit een groot aantal fonts -zoals eerder al aangegeven, op dit moment meer dan 1000 (om precies te zijn, op het moment van dit schrijven 1424 font families) en het aantal is nog steeds groeiende- wat je eigenlijk heel makkelijk in je webpagina kan gebruiken. Je kiest bij Google Fonts het font of de fonts die je wilt gebruiken, en Google laat je de code zien, die je in de header van je HTML of in je CSS in moet voegen, om die fonts te kunnen gebruiken.

De voordelen van Google Fonts

Even los van het feit dat het natuurlijk altijd gunstig is om een groot aantal gratis fonts te hebben, en het heel prettig is dat de benodigde code om deze fonts te kunnen gebruiken helemaal gegenereerd wordt voor je, is een extra voordeel, dat dit centraal geleverd wordt vanuit het Google CDN. En dat is vooral met populaire fonts heel fijn.

Stel, ik gebruik het font Roboto -één van de meest populaire Google Fonts- op mijn site. En jij bezoekt mijn site, dus wat je browser dan doet is het font downloaden van de Google CDN site. Dat kost even, maar daarna wordt dit font gecachet.

Daarna ga je naar een andere site. En op die site wordt Roboto ook gebruikt. Wat jouw browser eerst zal doen is kijken in de cache, of dit font al eerder van de URL is gedownload. En tenzij je bijzondere dingen met je caching in je browser hebt gedaan, zal dit font 100 dagen in de cache blijven staan.

Wanneer die andere site en ik allebei Roboto geladen zouden hebben via de eigen website, dan zou de browser dit -ondanks dat het dezelfde fonts zijn- als verschillende downloads zien en zou het font tweemaal downloaden.

Maar dat hoeft dus niet. De browser heeft het al geladen bij het bezoek aan mijn website en bij die tweede website wordt het gedownloade font gewoon uit de cache gebruikt.

Lekker efficient toch?

Persoonlijke gegevens

Het probleem is hier, dat je het bestand download. En bij ‘downloaden’ hoort een IP adres. Nu geeft Google zelf aan, dat dit IP adres niet geregistreerd zal worden, maar de Europese regelmakers zijn het vertrouwen in Google een beetje kwijtgeraakt.

En hoewel ik het persoonlijk behoorlijk vergezocht vind, hebben de toezichthouders op de naleving van de GDPR in Duitsland en Oostenrijk besloten, dat hier dus sprake is van onwettige registratie van persoonsgegevens door een derde partij (Google) en de eigenaren van de websites een boete moesten krijgen.

Ik ben geen jurist. En het laatste wat ik hier wil doen is een juridische discussie beginnen over de geldigheid van dit argument. Dat is niet mijn vakgebied.

Wat ik wel wil is kijken, hoe dit soort situaties kunnen worden voorkomen. En dat is geen juridische, maar een technische oplossing.

Google Fonts API en de GDPR compliance ’the hard way’

Voor een WordPress professional is het eigenlijk geen groot probleem om de fonts ‘buiten Google om’ te gebruiken. Want Google biedt de mogelijkheid om de fonts te downloaden. Ik kan diezelfde fonts uploaden naar de website en de nodige HTML of CSS aanmaken om de fonts gewoon te tonen. Met een traditioneel thema is dat eigenlijk kinderlijk eenvoudig om te doen.

Met Pagebuilders is het wat lastiger. En omdat ik niet iedere pagebuilder ken, en ook absoluut niet iedere page builder aan zou willen bevelen, beperk ik mij even tot wat je zou moeten doen om geen Google fonts via de Google Fonts API meer te gebruiken, maar uitsluitend je gedownloade fonts.

Google Fonts en Elementor – Stap 1

Het eerste wat je zal moeten doen is ervoor te zorgen, dat je straks geen verwarring krijgt met de font namen door Google Fonts niet meer automatisch te laden in Elementor. Daarvoor ga je in het menu naar ‘Elementor->Instellingen’ en klik je op het tabblad ‘Geavanceerd’. Hier kan je ‘Google fonts laden’ uitzetten door voor de waarde ‘Blokkeren’ te kiezen.

Dit sla je natuurlijk op.

Google Fonts en Elementor – Stap 2

In Elementor kan je zelf nieuwe fonts toevoegen door te kiezen voor ‘Elementor -> Custom Fonts.

Hier kan je met de knop ‘Add New’ (die zijn ze vergeten te vertalen) een nieuwe ‘Font Family’ toevoegen.

En dat is best een klus. Laten we voor het begrip nog eens even stilstaan bij wat nu eigenlijk een ‘font family’ is.

Dit, dit en dit is driemaal hetzelfde lettertype, maar op een andere manier getoond. In het eerste geval wat vetter, in het laatste geval cursief. Maar ondanks dat het allemaal iets verschillende letters zijn, horen ze toch bij dezelfde ‘Font Family’.

De specifieke karakteristieken zijn echter in verschillende bestanden vastgelegd en wanneer je een font download bij Google Fonts en aangeeft het zowel in verschillende ‘diktes’ als cursief te willen hebben, krijg je dus ook een aantal verschillende bestanden.

Voor iedere ‘fontweergave’ zal een apart bestand zijn.

En omdat dit natuurlijk nog niet complex genoeg is, is het ook nog eens zo, dat in het verleden verschillende browsers verschillende font typen gebruikten. Wanneer je een download bestand krijgt van Google zullen niet alle bestandstypen erin zitten. Wat wel belangrijk is, is dat je de bestandstypen onder de juiste velden upload.

Let vooral ook op, dat je bij ‘Weight’ (de lijndikte van het font) en ‘Style’ de juiste waarden invult. Wat die waarde is, vind je vaak terug in de naamgeving van het font bestand (bijvoorbeeld ‘MyFont_100_Italic’ zal dus typisch een font zijn met de naam ‘MyFont’, een ‘Weight’ van 100 en cursief)

Na het invullen publiceer je het font en kan je het gebruiken. De juiste HTML en CSS worden door Elementor verzorgd.

Google Fonts API en de GDPR compliance – ‘The Easy Way’

Wanneer ik het had over ‘Google Fonts API en de GDPR compliance – ‘The Hard Way’ kon je eigenlijk al voorspellen, dat er ook een ‘easy way’ moest zijn. En die is er gelukkig ook. Maar hier moet een aantal kanttekeningen bij gemaakt worden.

De plugin OMGF is een plugin waarmee je Google fonts lokaal kan hosten. Overigens, onder ‘lokaal’ moet je verstaan ‘op jouw server’.

En dat terwijl er toch 100% gebruik gemaakt gaat worden van de Google API. Alle bovenstaande handelingen onder ‘The Hard Way’ zijn overbodig geworden.

Op het moment, dat de plugin is geïnstalleerd zal bij het laden van de pagina de pagina gescand worden op instructies tot het laden van (Google) fonts en zal de plugin in plaats daarvan het font downloaden en opslaan in een site cache. Vanaf dat moment zullen de fonts uit deze site cache worden geladen.

Dat betekent dus, dat het enige IP adres wat Google door zal krijgen het IP adres van jouw site is. Niet de IP adressen van jouw bezoekers.

Bijkomende voordelen

Omdat de fonts worden ‘gepreload’ door de plugin voorkomt dit een ‘Cumulative Layout Shift’, iets wat een negatief effect heeft op jouw waardering door google van de site.

Ook zal het aantal DNS lookups aan de kant van de bezoeker afnemen, wat ook weer zorgt voor een snellere paginaopbouw.

Kortom, deze plugin zal voor een lichte snelheidsverbetering zorgen.

Daarnaast is er een ‘Pro’ versie, maar aangezien ik die niet getest heb, ga ik hier ook niet verder op in.

De nadelen

De gratis versie van de plugin controleert alleen op de ‘aanbevolen manier’ voor het laden van fonts voor je website. Een wat meer ‘verouderde manier’, het werken met een @import statement of een @font-face statement wordt niet gecontroleerd.

Voor de meeste pagebuilders en thema’s zal dat geen enkel probleem zijn, maar wanneer je met een wat ouder thema werkt, is de kans dat er op deze manier fonts worden geladen.

De betaalde ‘Pro’ versie controleert daar wel op.

Hoe weet je of je geen ‘Pro’ versie nodig hebt?

Eigenlijk heel makkelijk.

Ga naar je website, open een pagina en zoek onder de rechter muisknop in je browser voor een optie als ‘Broncode bekijken’ of ‘HTML bekijken’.

Ga dan op zoek naar de woorden @import en @font-face.

Open daarna het ‘style.css’ bestand van je thema.

De naam kan er bijvoorbeeld als volgt uitzien :

https://[domeinnaam].nl/wp-content/themes/[themanaam]/style.css

Hierbij vervang je [domeinnaam] met de naam van jouw domein en [themanaam] met de naam van het thema.

Je voert weer dezelfde zoekopdrachten uit en als hier ook niets wordt gevonden, zal de plugin werken.

Tenminste… als er geen conflicten met andere plugins zijn!

Mogelijke conflicten

Sommige caching plugins bieden de mogelijkheid om diverse CDN’s op te geven in de configuratie van de cache. Eén van die opties is ook om bepaalde standaard CDN’s te gebruiken. Wanneer je hebt aangegeven in zo’n plugin dat je de Google CDN wilt gebruiken, dan kan het dat de OMGF plugin netjes alles heeft aangepast, maar jouw caching plugin daarna alles toch weer terugzet naar Google Fonts. Het is dus zeer zeker van groot belang om na het activeren van de plugin alles nog eens goed te testen, vooral de gecachte pagina’s.

Ook is het mogelijk, dat bepaalde plugins die je gebruikt toch nog stiekem Google Fonts gebruiken. De test die ik hierboven beschreef werkt goed voor de meeste situaties maar het is nog steeds mogelijk, dat in bepaalde situatie het niet (goed) zal werken.

Ten slotte

De twee oplossingen die ik hier heb beschreven zijn twee technische oplossingen voor een mogelijk juridisch probleem. Ik laat mij er niet verder over uit hoe waarschijnlijk ik het wel of niet vind, dat dit werkelijk een probleem binnen het Nederlands rechtsgebied gaat worden. Dit valt buiten mijn competentie. Wat ik wel belangrijk vind, is dat mijn klanten -en het liefst ook mijn lezers van mijn blog- gevrijwaard blijven van mogelijke boetes. Of je deze oplossing nu wel of niet in je website wilt implementeren is helemaal aan jou, maar zelf heb ik ervoor gekozen om in de toekomst op beschreven manier te werk te gaan met nieuw op te leveren websites.

Over Elementor

Het is geen toeval, dat ik in dit artikel Elementor noem om te laten zien, hoe je het probleem eventueel ook zonder een extra plugin op kan lossen. Elementor (Pro) is niet alleen de page- en theme builder met het grootste marktbereik op dit moment, maar ook met een groot aantal functies het het toch wel heel gemakkelijk maken om dingen ‘op maat’ te maken, zoals bijvoorbeeld de mogelijkheid om eenvoudig extra fonts toe te voegen, zoals in dit artikel beschreven.

Wil je meer weten over Elementor? Kijk dan ook eens naar de trainingen van WordXPression.