Tips en tutorials
WP thema's

Google fonts lokaal hosten

Geplaatst op: - Laatste aanpassing:

Het is mij het afgelopen jaar opgevallen dat er steeds meer vraag is naar het lokaal serveren (en opslaan) van lettertypen zoals die van Google Fonts. Dit komt mede doordat Google een aantal keer in opspraak is geweest op het gebied van privacy en haar diensten. Zo oordeelde een rechter in Duitsland dat een website 100 euro schadevergoeding moest betalen, omdat de website het IP-adres van de bezoeker aan Google had gegeven en daarmee in strijd is met de AVG. Dit kwam doordat de website gebruik maakte van Google Fonts.

Google ligt op dit moment in diverse landen onder een vergrootglas en ook in Nederland doet de Autoriteit Persoonsgegevens (AP) onderzoek. Het is begrijpelijk dat veel website eigenaren liever niet op de uitslag wachten en/of het vertrouwen hebben verloren en daardoor nu al naar alternatieven zoeken.

In dit artikel gaan we het over de voor- en nadelen van het lokaal hosten van fonts hebben en laat ik je zien op welke manieren je dit kunt doen en waar je rekening mee moet houden.

Inhoudsopgave


Allereerst wat is Google Fonts?

Google Fonts is een online bibliotheek waar je zo’n 1500 lettertypen (en sinds 2021 ook iconen) kunt vinden. De lettertypen zijn open source en gratis te gebruiken, van goede kwaliteit en daardoor populair bij web- bouwers en beheerders. Je kunt door de bibliotheek bladeren, een selectie maken en ze vervolgens op je website (of op je computer) gebruiken.

Hierbij kun je kiezen tussen de dynamische variant waarbij je vanaf je website naar de servers van Google verwijst of de statische variant waarbij je zelf de lettertypen download en op een eigen plek neerzet, oftewel; zelf host.


Waarom zelf hosten?

Zoals we eerder aanhaalde werd een Duitse website veroordeeld voor het doorsturen van het IP-adres van een bezoeker naar Google via Google Fonts. Want op het moment dat je voor de dynamische variant kiest moet de browser van de websitebezoeker verbinding maken met de servers van Google en hierbij wordt het IP-adres meegestuurd. Volgens de AVG mag dit niet tenzij de bezoeker hier expliciet toestemming voor heeft gegeven en veel websites doen dit zonder deze toestemming.

Op de privacy pagina van Google Fonts valt te lezen hoe Google Fonts data verzamelt en gebruikt. Als we de informatie op deze pagina mogen geloven worden er geen IP-adressen opgeslagen en ook niet gebruikt om gericht te kunnen adverteren (maar controleer de pagina vooral zelf gezien deze tussentijds kan zijn gewijzigd).

Toch vinden veel mensen het geen fijn idee dat Google over deze informatie kan beschikken en spelen partijen en wet en regelgeving hierop in door meer privacy te zoeken en te eisen. Door de lettertypen zelf te hosten weet je zeker dat er geen gegevens worden doorgestuurd en ga je privacy bewust om met de gegevens van de bezoeker.

De voor- en nadelen

✅ Voordelen Google Fonts Web API

  • Optimalisatie op basis van browser ondersteuning; bijvoorbeeld WOFF 2.0 compressie wanneer de browser dit ondersteunt
  • Kleiner bestandsformaat – de web API stuurt alleen de onderdelen welke nodig zijn
  • Compatibiliteit met alle browsers
  • Automatische updates wanneer er veranderingen zijn aangebracht aan het lettertype
  • Eenvoudiger in gebruik

❌ Nadelen Google Fonts Web API

  • Afhankelijkheid van Google en de uptime van de dienst
  • Google ontvangt informatie over de bezoeker zoals IP-adres, browser user agent enzovoorts
  • Je moet erop vertrouwen dat Google goed met deze gegevens om gaat en wil je aan de AVG voldoen dan zou je expliciet toestemming aan de bezoeker moeten vragen voor het gebruik van de web API

✅ Voordelen zelf hosten

  • Geen afhankelijkheid van Google en de uptime van de dienst
  • Privacy vriendelijk
  • Meer controle (geen automatische updates) maar dit betekent ook dat je er zeker van kunt zijn dat het font er niet zomaar anders uit ziet
  • Mogelijk snellere laadtijd wanneer je effectief caching toepast, preload en doordat de verbinding met de website al tot stand is gebracht

❌ Nadelen zelf hosten

  • Minder eenvoudig
  • Geen optimalisatie trucjes van Google
  • De bezoeker download (misschien) het hele- in plaats van onderdelen van het bestand waardoor het bestandsformaat groter is
  • Zelf optimalisatie zoals caching toepassen om de laadtijd te verbeteren
  • Geen automatische updates van het lettertype

Vroeger had de web API als bijkomend voordeel dat populaire lettertypen in sommige gevallen helemaal niet gedownload hoefde te worden wanneer je eerder een website had bezocht welke hetzelfde lettertype en de web API gebruikt. Dit voordeel is tegenwoordig verdwenen waardoor bestanden altijd gedownload moeten worden bij het eerste bezoek aan een website. Uiteraard kun je er met caching voor zorgen dat bestanden niet opnieuw gedownload hoeven te worden bij vervolgbezoeken.


Hoe werkt het zelf hosten?

Je kunt kiezen om dit met een WordPress plugin of met code te doen.

1. Met een WordPress plugin

Met de OMGF WordPress plugin kun je Google Fonts op een GDPR vriendelijke manier gebruiken. De plugin laat je namelijk alle verwijzingen naar de Google Webfonts vervangen door lokale kopieën. Daarnaast heeft het een aantal opties om fonts te optimaliseren en daardoor de snelheid van je website te verbeteren. De plugin kan o.a. handig zijn wanneer je een thema gebruikt waar al Google Webfonts in zitten en je wilt deze vervangen zonder de code te hoeven aanraken.

De gratis plugin biedt een heleboel opties maar wil je de plugin op een multisite gebruiken of fonts vanaf een eigen CDN laden? Dan zul je de PRO versie moeten kopen.

Door de plugin met de OMGF Additional Fonts add-on te combineren kun je vanuit WordPress in de Google Webfonts bibliotheek zoeken en nieuwe fonts selecteren zonder dat je daarvoor zelf iets hoeft aan te passen.

2. Met code

Ga naar de website van Google Fonts en zoek een lettertype uit die je wilt gebruiken.

Screenshot uitzoeken font in Google Fonts

Wanneer je een lettertype hebt gevonden en selecteert kom je op de detailpagina van het lettertype uit. Hier kun je eventueel nog het lettertype uitproberen met een eigen zin of tekst en vervolgens de stijl variaties uitkiezen die je gaat gebruiken. Kies nu de variaties uit.

Screenshot van de gekozen Google Fonts met een knop om ze te downloaden

Aan de rechterkant zie je de gekozen lettertype(n) en de stijl variaties verschijnen. Mocht je deze niet zien dan is het mogelijk dat het uitklapmenu verborgen is, je kunt hem actief maken door rechtsboven in de pagina op het ’tegel’ icoontje te klikken. Vervolgens kun je onderaan in het uitklapmenu op de “Download all” knop klikken om de bestanden te downloaden.

In dit bestand zul je TTF bestanden vinden. Je kunt deze op je computer installeren en ze bijvoorbeeld in een ontwerpprogramma gebruiken maar ze zijn niet ideaal voor het web, hiervoor kunnen we beter webfonts gebruiken. Helaas heeft Google geen eenvoudige manier om deze variaties te downloaden, maar gelukkig heeft iemand hier een oplossing voor bedacht genaamd: Google Webfonts Helper.

Geanimeerde afbeelding, uitzoeken van een lettertype in de Google Webfonts Helper tool

Ga naar de Google Webfonts Helper en zoek naar het lettertype en selecteer ook hier de stijl variaties die je wilt gebruiken. Meestal is dit een reguliere variant (400) en een dikgedrukte variant (600) je kunt hier uiteraard vanaf wijken als je een andere variatie mooier vind. Het is wel verstandig om ook de schuingedrukte (italic) variatie te selecteren wanneer je van plan bent de tekst ook schuingedrukt te gebruiken.

Screenshot font-face CSS op de Google Webfonts Helper site.

Direct onder het onderdeel waar je de variaties kiest zul je een stukje CSS code zien verschijnen. Je hebt hier ook twee knoppen staan “Best Support” en “Modern Browsers” ik zou hier voor het laatste, dus de moderne browsers kiezen, dit scheelt aanzienlijk in de bestanden die je nodig hebt (en daarmee ook de laadtijd) daarnaast heeft haast iedereen een “moderne browser” tegenwoordig en kunnen we terugvallen naar een standaard lettertype voor wie een oude browser gebruikt.

Kopieer de code en plak hem de CSS stylesheet van je website, zorg ervoor dat het pad bij src naar het pad wijst waar de CSS jouw font bestanden kan vinden. Dit is relatief aan de plek waar de stylesheet op de website te vinden is.

Screenshot download knop op de Google Webfonts Helper site.

Download nu de lettertype bestanden door op de grote blauwe knop te drukken en sleep de bestanden naar de juiste plek. Je kunt nu het lettertype in je CSS gaan toepassen. We geven je een voorbeeld:

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

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

body {
  font-family: 'Open Sans', "Times New Roman", Times, serif;
  font-weight: 400;
}

h1, h2, h3, h4, h5 {
  font-family: 'Open Sans', Arial, Helvetica, sans-serif;
  font-weight: 600;
}

In de code hierboven laden we de webfonts in met de @font-face regel, vervolgens kunnen we het lettertype gebruiken op onze CSS elementen. In het voorbeeld geven we aan dat we Open Sans overal willen gebruiken door hem aan de body tag mee te geven en geven we ook expliciet aan dat we Open Sans op onze koppen (headings) willen gebruiken door hem h1, h2, h3, h4, h5 mee te geven. De lettertypen die je achter Open Sans aangegeven ziet – zijn onze fallback, dit betekent dat wanneer het lettertype niet beschikbaar is (bijvoorbeeld wanneer iemand een oude browser gebruikt) dat de browser dan terugvalt op het eerstvolgende lettertype in het rijtje.

2.1 Extra aandachtspunten

Let op dat het font goed geladen wordt

Wanneer je het lettertype ook op je computer hebt staan (geïnstalleerd) kan het er op lijken dat het laden van een webfont is gelukt. Zelfs wanneer deze in werkelijkheid een verkeerd pad heeft en dus een 404 (niet gevonden) error geeft. Dit komt omdat de browser hem dan wel niet kan vinden maar de computer wel weet hoe hij hem moet tonen. In deze situatie zie jij het juiste font maar de bezoeker wellicht niet. Wees je hiervan bewust en controleer de werking ook op een ander apparaat of vraag een kennis dit te doen.

Gebruik de juiste stijl variatie (font-weight, font-style)

Wanneer je de fonts hebt uitgekozen, download en installeer dan alle variaties die je gaat gebruiken. Zorg er ook voor dat je in je CSS het lettertypen aangeeft bij de font-family en vervolgens ook de variatie. Wil je dikgedrukte tekst? Gebruik dan font-weight: 600 of hoger, wil je schuingedrukte tekst? Zorg er dan voor dat je ook font-style: italic definieert. Dit is natuurlijk mits je deze variaties hebt gekozen voordat je de lettertypen ging downloaden.

En pas caching toe

Eerder benoemde ik dat je de caching trucjes van Google mist op het moment dat je zelf de lettertypen host. De meeste shared webhosting partijen hebben zelf wat standaard caching regels om ervoor te zorgen deze ‘self hosted’ lettertypen toch caching hebben. Wil je het maximale aan snelheidswinst eruit halen? Dan kan het verstandig zijn deze regels te controleren en verder uit te breiden, wanneer je thuis bent in caching.


Tot slot

Je weet nu hoe je de Google Webfonts zelf kunt hosten, wat de voor- en nadelen hiervan zijn en waar je op moet letten. Heb je vragen? Laat gerust een reactie achter. Ik hoor het graag. 🙂

Geef een reactie

Reacties zullen eerst worden gemodereerd, we publiceren je e-mailadres niet.