Google Fonts lokaal hosten in WordPress

Wanneer uw WordPress-site Google Fonts laadt vanaf fonts.googleapis.com, stuurt de browser van elke bezoeker een verzoek naar de servers van Google. Dit verzoek bevat het IP-adres, de user agent, de referrer-URL en andere metadata van de bezoeker. Google ontvangt deze gegevens bij elke pagina-aanroep, wat een aanzienlijke privacyzorg vormt onder de Europese gegevensbeschermingswetgeving.

Waarom Google Fonts een GDPR-probleem zijn

In januari 2022 oordeelde een Duitse rechtbank (LG München, zaak 3 O 17493/20) dat het insluiten van Google Fonts via de standaard externe link een GDPR-overtreding vormt. De rechtbank stelde vast dat het doorgeven van het IP-adres van een bezoeker aan Google zonder voorafgaande toestemming in strijd is met artikel 6, lid 1 van de GDPR, omdat de website-exploitant geen gerechtvaardigd belang heeft dat zwaarder weegt dan het recht van de gebruiker op gegevensbescherming. De site-exploitant werd veroordeeld tot het betalen van schadevergoeding aan de getroffen bezoeker.

Deze uitspraak vormde een duidelijk precedent in de hele EU. Sindsdien hebben meerdere advocatenkantoren massa-waarschuwingsbrieven gestuurd naar website-exploitanten die Google Fonts nog extern laden. De oplossing is eenvoudig: host de lettertypebestanden op uw eigen server zodat er geen gegevens naar Google worden verzonden. Deze aanpak is volledig GDPR-conform, elimineert het juridische risico en verbetert vaak ook de laadsnelheid.

Google Fonts downloaden voor zelf-hosting

De eenvoudigste manier om de juiste lettertypebestanden met de juiste CSS te krijgen is de tool Google Webfonts Helper van Mario Ranftl. Zo gebruikt u deze:

1. Open de Google Webfonts Helper en zoek het lettertype dat u nodig heeft (bijv. "Open Sans", "Roboto", "Lato").
2. Selecteer de tekensets die u nodig heeft. Voor de meeste Europese websites zijn "latin" en "latin-ext" voldoende. Voeg "cyrillic" of "greek" alleen toe als uw inhoud die schriften daadwerkelijk gebruikt.
3. Kies de lettertypegewichten en stijlen die u op uw site gebruikt. Veelvoorkomende selecties zijn 400 (regular), 400 cursief, 700 (bold) en 700 cursief. Vermijd het selecteren van gewichten die u niet daadwerkelijk gebruikt, omdat elk gewicht de bestandsgrootte vergroot.
4. De tool genereert kant-en-klare @font-face CSS-regels. Kopieer deze. U kunt het bestandspad-prefix aanpassen aan uw serverdirectorystructuur.
5. Download het zip-bestand met alle geselecteerde lettertypebestanden in moderne formaten (woff2 en woff).

Handmatige zelf-hosting stap voor stap

Stap 1: Upload de lettertypebestanden

Maak een fonts-directory aan in uw thema- of childthemamap en upload de gedownloade lettertypebestanden daar:

/wp-content/themes/uw-thema/fonts/
    open-sans-v40-latin-regular.woff2
    open-sans-v40-latin-regular.woff
    open-sans-v40-latin-700.woff2
    open-sans-v40-latin-700.woff

Als u een childthema gebruikt, plaats de lettertypen dan in de childthemamap zodat ze updates van het bovenliggende thema overleven.

Stap 2: Voeg de @font-face CSS toe

Voeg de door Google Webfonts Helper gegenereerde CSS toe aan de stylesheet van uw thema of een aangepast CSS-bestand. Zorg ervoor dat u font-display: swap instelt zodat tekst zichtbaar blijft terwijl de lettertypen laden:

@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/open-sans-v40-latin-regular.woff2') format('woff2'),
         url('../fonts/open-sans-v40-latin-regular.woff') format('woff');
}

@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/open-sans-v40-latin-700.woff2') format('woff2'),
         url('../fonts/open-sans-v40-latin-700.woff') format('woff');
}

@font-face {
    font-family: 'Open Sans';
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/open-sans-v40-latin-italic.woff2') format('woff2'),
         url('../fonts/open-sans-v40-latin-italic.woff') format('woff');
}

Stap 3: Verwijder de externe Google Fonts-verwijzing

U moet voorkomen dat uw thema lettertypen laadt vanaf fonts.googleapis.com. Dit gebeurt doorgaans door het stijl-handle te dequeueen. De handle-naam verschilt per thema, dus u moet mogelijk uw HTML-bron inspecteren om deze te vinden:

add_action('wp_enqueue_scripts', function() {
    // Veelvoorkomende handle-namen die door thema's worden gebruikt
    wp_dequeue_style('google-fonts');
    wp_deregister_style('google-fonts');

    // Sommige thema's gebruiken andere handles
    wp_dequeue_style('flavor-google-fonts');
    wp_deregister_style('flavor-google-fonts');

    // Divi-thema
    wp_dequeue_style('divi-fonts');
    wp_deregister_style('divi-fonts');
}, 100);

De prioriteit van 100 zorgt ervoor dat deze code uitgevoerd wordt nadat het thema zijn stijlen heeft toegevoegd. Als het thema een andere handle-naam gebruikt, controleer dan uw paginabron op een <link>-tag met fonts.googleapis.com en noteer het id-attribuut (verwijder het achterliggende -css om de handle-naam te krijgen).

Sommige thema's coderen de Google Fonts-link rechtstreeks in de templatekoptekst in plaats van wp_enqueue_style te gebruiken. In dat geval moet u mogelijk de header-template bewerken of een childthema gebruiken om deze te overschrijven.

Zelf-hosting met een plugin

Als u liever niet handmatig met lettertypebestanden en CSS werkt, kunnen plugins het hele proces automatiseren:

• OMGF (Optimize My Google Fonts): detecteert automatisch Google Fonts die op uw site geladen worden, downloadt de lettertypebestanden naar uw server, genereert lokale @font-face CSS en verwijdert de externe Google Fonts-verwijzingen. Het preload ook lettertypen voor betere prestaties en zorgt voor cache-busting. Dit is de populairste optie voor deze specifieke taak.
• Asset CleanUp (Pro): naast algemene asset-optimalisatie kan het Google Fonts detecteren en lokaal hosten. Het biedt meer controle over welke pagina's welke lettertypen laden, handig voor sites waar verschillende secties verschillende typografie gebruiken.
• Perfmatters: bevat een lokale Google Fonts-functie naast andere prestatie-optimalisatietools. Een goede keuze als u één plugin wilt voor meerdere prestatieverbeteringen.

font-display: swap begrijpen

De eigenschap font-display: swap in uw @font-face-regels is belangrijk voor de gebruikerservaring en Core Web Vitals. Zonder deze eigenschap kunnen browsers tekst verbergen totdat het lettertype klaar is met laden (bekend als FOIT, of Flash of Invisible Text). Met swap toont de browser direct tekst met een fallback-systeemlettertype en vervangt deze zodra het aangepaste lettertype is geladen. Dit voorkomt dat layoutverschuivingen meegeteld worden in uw Cumulative Layout Shift (CLS)-score en zorgt ervoor dat inhoud leesbaar blijft, zelfs op trage verbindingen.

Font-subsetting voor betere prestaties

Als u verder wilt gaan met optimalisatie, overweeg dan om uw lettertypen te subsetten. Een volledig "Latin Extended" lettertypebestand kan tekens bevatten voor talen die u nooit op uw site gebruikt. Tools als fonttools (pyftsubset) of Everything Fonts Subsetter kunnen ongebruikte tekens verwijderen en de bestandsgrootte aanzienlijk verkleinen. Een lettertypebestand dat heel Latin Extended dekt kan bijvoorbeeld 25KB zijn, maar een subset met alleen de tekens die in het Engels en Duits worden gebruikt kan onder de 15KB liggen. Voor de meeste sites zijn de door Google Webfonts Helper aangeboden tekensets al een redelijke subset, dus deze stap is optioneel.

Verifiëren dat er geen externe lettertype-verzoeken meer zijn

Na het doorvoeren van uw wijzigingen is het belangrijk om te controleren of er geen verzoeken naar fonts.googleapis.com of fonts.gstatic.com meer zijn. Open de Developer Tools van uw browser (F12), ga naar het tabblad Netwerk, herlaad de pagina en filter op "font" of zoek naar "googleapis". Controleer meerdere pagina's, niet alleen de homepage, omdat sommige thema's verschillende lettertypen laden op verschillende paginatemplates.

Controleer ook op Google Fonts die door plugins worden geladen. Sommige paginabuilders, sliderplugins of formulierplugins laden hun eigen Google Fonts onafhankelijk van het thema. U moet mogelijk de instellingen van elke plugin controleren op een optie "Google Fonts uitschakelen" of "lettertypen lokaal laden".

Verifiëren met InspectWP

Voer een nieuwe InspectWP-scan uit nadat u uw wijzigingen heeft doorgevoerd. De GDPR-sectie van uw rapport laat zien of er nog verzoeken naar Google Fonts-servers zijn. InspectWP controleert op verbindingen met zowel fonts.googleapis.com (de CSS) als fonts.gstatic.com (de lettertypebestanden zelf). Als alle lettertypen correct zelf-gehost zijn, mag geen van beide domeinen in de lijst met externe bronnen verschijnen.