WPLounge
Home » Developers » Hoe kan je Google Fonts lokaal hosten?

Hoe kan je Google Fonts lokaal hosten?

We gaan je stapsgewijs helpen om Google Fonts lokaal te hosten op je WordPress website. Hierdoor wordt je website tot wel 33% sneller geladen wat bovendien zorgt voor een betere gebruikerservaring.

Affiliate disclaimer:
In onze artikelen en op onze pagina's staan affiliate links. Wanneer je via één van deze links een aankoop doet, ontvangen wij een (meestal kleine) commissie van de verkoper. Wij geven altijd onze eerlijke mening over producten. Klik hier voor meer informatie.

Veel WordPress websites bevatten speciale lettertypes die meestal van de Google Fonts server geladen worden. Google stelt deze fonts gratis ter beschikking en de meeste thema’s maken daar graag gebruik van.

Wat zijn Google Fonts?

Google Fonts werden gelanceerd in 2010 en is de populairste open source bibliotheek voor lettertypen. Er zijn momenteel meer dan 1200 gratis fonts beschikbaar. Het gebruik van een goed leesbaar lettertype vergroot de leesbaarheid van de website en is belangrijk voor het goed overbrengen van de boodschap.

TIP VAN WPLOUNGE
Divi theme & Divi Builder
Bij Elegant Themes ontvang je meer dan
85 premium WordPress themes (waaronder Divi!) voor maar 89 dollar!

Bekijk de themes »»
Lees meer over Divi.

Nadelen van Google Fonts

Het gebruik van webfonts zoals Google Fonts, heeft als nadeel dat de font eerst van de Google server gedownload moet worden. Dit zorgt voor een extra HTTP-aanvraag voor het downloaden van de font vanaf fonts.googleapis.com. Toch is het zo dat niet iedere bezoeker het font steeds opnieuw moet downloaden bij een bezoek aan je website. Het lettertype kan namelijk al beschikbaar zijn in de browsercache van de bezoeker.

Google Fonts lokaal hosten in WordPress

Voordat we beginnen, voeren we een performance test uit op onze testwebsite met PageSpeed Insights. Hieruit blijkt dat de ‘Largest Contentful Paint‘, een belangrijke core web vital, een score heeft van 4 seconden. Dat moet beter kunnen!

PageSpeed Insights resultaten

In hetzelfde PageSpeed Insights rapport staan ook suggesties die kunnen helpen de pagina sneller te laden. Wanneer we de aanbeveling bekijken bij ‘verwijder bronnen die de weergave blokkeren‘ zien we het volgende.

PageSpeed Insights aanbevelingen
Google PageSpeed – Aanbevelingen

Uit het rapport blijkt dat de Google webfont, die geladen wordt vanuit fonts.googleapis.com, een potentiële besparing kan opleveren van 780 ms! Wanneer we met de muis bewegen over de URL /css?family=… zien we dat de website het font Open Sans en Lato gebruikt.

Het downloaden van de Font bestanden

Alle gewenste lettertypen van Google zijn gratis te downloaden. De beste manier hiervoor is om de Google Webfonts Helper te gebruiken. Kies het juiste lettertype en stijlen voor je website. In ons geval is dat Open Sans met als subset ‘latin-ext‘ in regular (400) en semi-bold (600).

webfont open sans
Webfont Open Sans

Vervolgens is er de keuze tussen en downloaden van de ‘Best Support‘ fonts of voor ‘Modern Browsers’. Wij willen de snelste font installeren dus kiezen we voor ‘Modern Browsers’. Daaronder staat meteen een CSS-code snippet die we kunnen gebruiken voor het laden van de fonts. Handig!

CSS code snippet font
Font CSS code snippet

Kopieer de CSS code naar een tekst editor zoals notepad, en download de fonts.

Uploaden van de fonts via FTP

De font-bestanden die je zojuist hebt gedownload moeten we nu uploaden naar de server via FTP. Start je favoriete FTP programma en maak een nieuwe map aan om daar de fonts naar te uploaden. Wij noemen deze map ‘fonts’:

font uploaden via FTP
Upload de fonts via ftp

Lettertype toevoegen aan je CSS

De fonts zijn geüpload naar de server maar het WordPress thema weet nog niet dat de lokale fonts gebruikt moeten worden. Ons advies is om een child thema te gebruiken en de CSS code die je eerder hebt gekopieerd in het bestand style.css van het child thema te plakken:

/* open-sans-regular - latin-ext */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: local(''),
       url('https:/voorbeeld.nl/fonts/open-sans-v26-latin-ext-regular.woff2') format('woff2'), 
       url('https:/voorbeeld.nl/fonts/open-sans-v26-latin-ext-regular.woff') format('woff'); 
}
/* open-sans-600 - latin-ext */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 600;
  src: local(''),
       url('https:/voorbeeld.nl/fonts/open-sans-v26-latin-ext-600.woff2') format('woff2'), 
       url('https:/voorbeeld.nl/fonts/open-sans-v26-latin-ext-600.woff') format('woff'); 
}

Let op de URL! Deze dient aangepast te worden en te verwijzen naar de bestanden die je net via FTP geüpload hebt.

Als laatste stap zal je het lettertype moeten toewijzen aan je WordPress website. Wellicht is het eerst nodig om de juiste CSS-class te vinden door je website te inspecteren met bijvoorbeeld Google DevTools. Hieronder volgt een standaard voorbeeld van de CSS code. Plaats ook deze code in het style.css bestand van je child thema.

body {font-family:'Open Sans', 'Lato', sans-serif;}
h1,h2,h3,h4,h5,h6,p,a {font-family:'Open Sans', 'Lato', sans-serif;}

Is de website sneller?

Na alle aanpassingen worden de website fonts nu lokaal geladen. Wat is de impact hiervan voor de snelheid van de website? Laten we gaan kijken!

PageSpeed Insights resultaten

Dat ziet er een stuk beter uit! De core web vital Largest Contentful Paint is een stuk sneller: van 4 seconden naar 2,7 seconden. Maar ook de overige statistieken hebben een flinke performance boost gekregen:

Font FCP SI LCP TTI TBT
Google3,5s3,5s4,0s4,9s0,2s
Eigen server2,0s2,4s2,7s4,0s0,12s

Door het zelf hosten van het lettertype is er een snelheidswinst behaalt van maar liefst 33%!

Google Fonts blijven actief, wat nu?

Je hebt alle stappen doorlopen maar Google PageSpeed Insights blijft aangeven dat er nog steeds lettertypes geladen worden vanaf de Google font server fonts.googleapies.com. Wat nu? Gelukkig biedt het gebruik van een plugin uitkomst. Zo heeft de caching plugin Autoptimize de optie om Google fonts te verwijderen. Een andere mogelijkheid is het installeren van de plugin ‘Disable and Remove Google Fonts‘.

Tekst zichtbaar houden tijdens het laden van fonts

De volgende foutmelding zie je vaak bij het testen van een website met PageSpeed Insights. We laten zien hoe je de foutmelding oplost.

Zorg ervoor dat tekst zichtbaar blijft tijdens het laden van weblettertypen

PageSpeed Insights

In de CSS die we in voorgaande stappen hebben toegevoegd in het style.css bestand, kunnen we het volgende toevoegen:

font-display:swap;

Met deze CSS code instrueer je de browser om een fallback-lettertype te gebruiken. Het zal in een standaard font tekst weergeven totdat het aangepaste lettertype volledig is gedownload. Dit wordt ook wel ‘flash of unstyled text’ genoemd. Onze CSS code in style.css komt er dan als volgt uit te zien:

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

Herhaal dit voor ieder lettertype die lokaal op je website wordt geladen.

Een plugin oplossing

Kost het toch teveel moeite om lokale lettertypes handmatig toe te voegen, of kom je er niet helemaal uit? Dan is er nog een plugin oplossing die alle Google Fonts lokaal zet. De plugin Optimize My Google Fonts neemt al het werk uit handen. Er is echter één nadeel, bij de gratis versie zijn de font bestanden aanzienlijk groter dan die je handmatig via de Google WebFont Helper kunt downloaden.

OMFG plugin

Voor lange termijn gebruik is het advies dan ook om de premium versie van de OMFG plugin te gebruiken. Het bevat verschillende mogelijkheden om het laden van lettertypen verder te optimaliseren.

Tot slot

Het lokaal hosten van fonts biedt verschillende voordelen, het laden van de website was maar liefst 33% sneller. Is jouw website erg traag dan is het lokaal hosten van fonts waarschijnlijk niet het eerste waar je naar kijkt. Wil je echter alles uit de kast halen om je website zo goed mogelijk te optimaliseren, dan is het lokaal laden van fonts zeker de moeite waard. Heb je ondersteuning nodig bij het installeren van lokale fonts? Vraag het WPLounge!

Beoordeel dit artikel

Mark Hagendijk

Mark biedt technische ondersteuning voor WordPress. Zo nu en dan maakt hij graag tijd vrij om een bijdrage te leveren aan WPLounge.

Reageer