Websites bestaan voor een groot deel uit tekst. De lettertype(s) die je kiest zijn daarom bepalend voor de uitstraling van je website en een belangrijk onderdeel van je branding.
Het aanbod in lettertypes is groot. Je kunt bijvoorbeeld kiezen voor een systeemfont (zoals Arial), een lettertype kopen van een designer of gebruik maken van lettertypes van Google Fonts, Adobe, etc.
Veel websites kiezen ervoor om gebruik te maken van Google Fonts.
De populariteit is te danken aan meerdere factoren. Allereerst kun je de lettertypen gratis gebruiken. Nu zijn er wel meerdere websites waar je gratis lettertypen kunt downloaden, maar daarbij moet je goed naar de licenties kijken om te bestuderen of het ook daadwerkelijk gratis is voor jouw project.
Ook moet je bij het downloaden van gratis lettertypen goed kijken of de website wel betrouwbaar is. In het geval van Google weet je sowieso dat het veilig is. Daarnaast is het aanbod heel groot. Je kunt namelijk kiezen uit zo’n 1400 lettertypes. En niet geheel onbelangrijk is dat hier vele mooie lettertypes tussen zitten.
Een overzicht van alle beschikbare lettertypes vind je op de website van Google.
Je kunt Google Fonts op 2 verschillende manieren gebruiken:
- Dynamisch – hierbij worden de lettertypes gedownload van de server van Google zodra iemand je website bezoekt.
- Statisch – hierbij worden de lettertypes op je eigen server gehost.
Tot voor kort stelde ik de lettertypes die ik wou gebruiken gewoon in binnen het thema dat ik gebruikte. Dit was de dynamische variant. Ik vermoed dat de meeste mensen dit doen.
Ik ben mij recent steeds bewuster geworden van de privacy van mijn bezoekers. Dit heeft er onder andere toe geleid dat ik van Google Analytics ben overgestapt op een privacy vriendelijk alternatief. Daarna heb ik ook besloten om de Google Fonts die ik gebruik zelf te gaan hosten.
In dit artikel leg ik je uit wat hier de voordelen van zijn en hoe je dit kunt doen mocht je dat ook willen.
Privacy (AVG)
De belangrijkste reden voor mij om Google Fonts lokaal te hosten is om te privacy van mijn bezoekers beter te waarborgen.
Als iemand jouw website bezoekt dan wordt de website gedownload om zichtbaar te worden in de browser.
In het geval dat je op je website gebruik maakt van de dynamische variant van Google Fonts (zoals eerder uitgelegd) dan staan de lettertypes echter niet op jouw eigen server.
De lettertypes worden dan geleverd vanaf de server van Google. En tijdens dit proces van dat iemand jouw website bezoekt en dat Google de lettertypes levert heeft Google het IP-adres van de bezoeker nodig.
Kortom zodra een bezoeker een pagina op jouw website opent, dan wordt het IP-adres van de bezoeker verzonden naar Google.
Het zit alleen zo dat volgens de AVG een IP-adres onder persoonlijke informatie valt.
19 januari 2022 heeft een Duitse rechter dan ook geoordeeld dat een website een schadevergoeding van €100 moet betalen omdat het IP-adres van een bezoeker zonder toestemming werd doorgeven aan Google voor het gebruik van Google Fonts.
Ik heb onvoldoende juridische kennis om over deze zaak zelf wat te zeggen. Wat dit voor Nederland gaat betekenen in de toekomst weet ik dan ook niet.
Persoonlijk zou ik niet zozeer bang zijn voor een boete. Er zijn erg veel websites die Google Fonts niet lokaal hosten en zover ik weet is dit het enige voorbeeld van een schadevergoeding.
Het is echter erg eenvoudig om Google Fonts lokaal te hosten. Ik zie dan ook geen reden om er mee te wachten. Het belangrijkste is dat je meer gefocust bent op de privacy van je bezoekers.
Impact op de snelheid van je website
Een bijkomend voordeel van Google Fonts lokaal te hosten is dat het de laadtijd van je website (licht) kan verbeteren.
De lettertypes die je gebruikt op je website hebben een impact op de snelheid van je website.
Vanuit het oogpunt voor de snelheid is het vooral belangrijk het aantal verschillende lettertypes te beperken. Ik raad aan om niet meer dan 1 of 2 verschillende font families te gebruiken.
Wanneer je daarbij gebruik maakt van lettertypes van derden, dan worden deze gedownload worden van hun server. In het geval van Google Fonts dus van de server van Google.
Als iemand jouw website bezoekt dan maakt de browser een aanvraag bij de volgende externe domeinen:
- fonts.googleapis.com – hier wordt het CSS bestand geladen.
- fonts.gstatic.com – hier wordt het lettertype bestand gedownload.
Kies je er daarentegen voor om de lettertypes lokaal te hosten, dan wordt het lettertype bestand vanaf je eigen server gedownload en heb je geen apart CSS bestand nodig aangezien je deze in je WordPress thema kunt opslaan.
Thema instellingen
Google Fonts lokaal hosten in WordPress kan op meerdere manieren. Er zijn meerdere (gratis) plugins waarmee je dit eenvoudig kunt doen. Een andere optie is om de lettertypes zelf te downloaden en ze daarna up te loaden op je server.
Voordat je een keuze maakt raad ik je aan om eerst te kijken naar of dit al kan in de instellingen van het thema dat je gebruikt. Vanwege de privacy redenen neemt de vraag naar lokaal hosten van lettertypes toe. Sommige thema’s spelen hier al op in door het mogelijk te maken dit te regelen in de instellingen van het thema. Hier volgen een aantal van een aantal voorbeelden:
- GeneratePress: dit is het thema dat ik gebruik. Met dit thema moet je zelf de lettertypes uploaden, daarna kun je eenvoudig uitschakelen dat er lettertypes vanaf de server van Google worden geladen. Zie voor meer informatie hun documentatie.
- Blocksy: met Blocksy Pro kun je eenvoudig in het dashboard in WordPress zelf instellen dat je Google Fonts lokaal wilt gebruiken. Zie voor meer informatie hun documentatie.
- Kadence: bij de (betaalde) bundles zit een Kadence Custom Font plugin. Zie voor meer informatie hun documentatie.
- WP Astra: dit thema biedt in de customizer ook de mogelijkheid om lokaal te laden. Zie voor meer informatie hun documentatie.
Je kunt dus altijd eerst even kijken op de website van jouw thema of er een mogelijkheid is om in de thema instellingen ervoor te kiezen om lettertypes lokaal te laden. Mocht dat niet het geval zijn dan kun je daar een aparte plugin voor gebruiken of het zelf handmatig doen.
1. Met behulp van een plugin
De makkelijkste manier om Google Fonts lokaal te hosten indien dit niet direct in je thema instellen kan is door gebruik te maken van een plugin.
Hieronder volgen een aantal plugins waarmee je dit kunt doen:
Zelf maak ik gebruik van OMGF. Dit is de enige plugin waar ik zelf ervaring mee heb. Er is zowel een gratis versie (die gebruik ik) en een betaalde versie.
Deze plugin is erg gebruiksvriendelijk. Nadat je de plugin hebt geinstalleerd en geactiveerd hoef je alleen naar beneden te scrollen en te klikken op ‘Save & Optimize’.
Voor meer geavanceerde instellingen kun je de uitgebreide documentatie op de website van de ontwikkelaar bekijken.
Met de ‘Fonts Plugin’ heb ik dus geen ervaring, maar op hun website zag ik wel een mooie Google Fonts Checker. Als je niet zeker weet of jouw website Google Fonts gebruikt dan kan je dat op hun website checken door je URL in te voeren. Als blijkt dat je Google Fonts gebruikt, dan laten ze ook meteen zien of je deze lokaal host of niet.
2. Zonder een plugin
Om Google Fonts lokaal te hosten zonder gebruik te maken van een plugin moet je wel een beetje technisch zijn. Je moet namelijk de lettertypes (via de FTP) uploaden naar je eigen server. Het is daarom aan te raden om eerst een backup te maken. Als je je hier niet comfortabel bij voelt raad ik alsnog aan om een plugin te gebruiken of om hulp te vragen aan iemand die je hiermee kan helpen.
Stap 1: het lettertype downloaden
Voor het downloaden van het lettertype raad ik aan om gebruik te maken van de Google Webfonts Helper.
In deze tool kun je links bovenin het lettertype opzoeken die je wilt gebruiken. Een lettertype die ik bijvoorbeeld vaak gebruik is ‘Poppins’.
Als je een gewenst lettertype hebt gevonden kun je vervolgens de verschillende stijlen aanvinken die je wilt downloaden.
Hoe meer verschillende lettertypes en variaties er geladen moet worden, hoe groter de impact op de snelheid is.
Ik raad daarom vaak aan om 1 of 2 verschillende lettertypes te downloaden en alleen de variaties aan te vinken die je nodig hebt.
Meestal kies ik voor 1 lettertype voor de koppen, waarbij ik genoeg heb aan 1 variatie. En nog 1 lettertype voor de body teksten, waardoor er een mooi contrast ontstaat.
Voor deze website die je nu leest heb ik gekozen om voor de koppen en de body hetzelfde lettertype te gebruiken, namelijk Inter. Voor de Body gebruik ik Regular (400) en voor de koppen 500 zodat deze iets vetter gedrukt zijn.
Je kunt vervolgens kiezen tussen ‘Best support’ of ‘Modern Browsers’.
Tenzij je weet dat je bezoekers hebt die hele oude browsers gebruiken om je website te bezoeken voldoet alleen ‘Modern Browser’ prima.
Als je de variaties hebt aangevinkt die je nodig hebt scroll je naar beneden en download je het bestand.
Stap 2: het lettertype uploaden
Het bestand dat je hebt gedownload is een ZIP bestand. Deze moet je eerst uitpakken en vervolgens kun je de bestanden via FTP uploaden naar je server.
WordPress heeft zelf geen mapje voor lettertypes, dus die moet je eerst zelf aanmaken. Ik kies er meestal voor om in mijn child theme een mapje te maken genaamd ‘Fonts’ maar je kunt het bijvoorbeeld ook in wp-content > uploads doen.
Upload vervolgens alle gedownloade bestanden naar de map die je hiervoor hebt aangemaakt.
Stap 3: CSS plakken
Nu moet je terug gaan naar de pagina van Google Fonts Helper waar je het lettertype hebt gedownload. Bij stap 3 zie je staan ‘Copy CSS’.
Hier selecteer je ‘Best support’ of ‘Modern Browsers’.
Onder de CSS (zie de rode pijl) moet je de URL invoeren van de map waarin je de lettertypes eerder (zie stap 2) hebt upgeload. Dit kan er ongeveer uit zien zoals websitenaam.nl/naam-van-je-child-theme/fonts/ maar dit hangt dus er van af waar je het mapje hebt aangemaakt. De tool zorgt er vervolgens voor dat de bestemming die je hier invult op de juiste plek in de CSS wordt verwerkt.
Vervolgens kopieer je de CSS en plak je deze in je website.
Je kunt de CSS toevoegen aan de stylesheet van je thema. Ik raad je wel aan dit alleen te doen als je gebruik maakt van een child theme.
Als je geen child theme gebruikt kun je ervor kiezen om gebruik te maken van de Customizer (Customizer > Extra CSS). Houd er wel rekening mee dat de CSS die je hier invoert specifiek is voor het thema dat je gebruikt. Als je later van thema wisselt, raak je de CSS die je hier invoert kwijt.
WordPress kennende zijn er hoogst waarschijnlijk ook wel plugins waarmee je eenvoudig CSS kunt toevoegen maar ik gebruik zelf altijd een child theme of gewoon de Customizer.
Stap 4: Thema instellingen
Als je WordPress thema gebruik maakt van geïntegreerde Google Fonts dan wil je zeker weten dat er geen verbinding meer wordt gemaakt met de server van Google.
Sommige thema’s bieden de mogelijkheid om direct in de instellingen uit te schakelen dat er Google Fonts worden geladen. Het is dus aan te raden om eerst in je dashboard te kijken of je dit kunt vinden bij het thema dat jij gebruikt.
In het thema GeneratePress dat ik gebruik moet ik hiervoor naar de Customizer > Typografie en daarna op Lettertype toevoegen klikken.
Je vult hier vervolgens de ‘font-family’ in van het lettertype dat je wilt gebruiken. Deze naam moet hetzelfde zijn geschreven zoals het in de CSS staat (zie stap 3).
Zorg ervoor dat Google Font is uitgeschakeld:
Als jouw thema geen mogelijkheid heeft om Google Fonts uit te schakelen, dan kun dit het doen door zelf code toe te voegen aan je website. Als je geluk hebt kun je er iets over vinden in de documentatie van het thema dat je gebruikt en anders kan je proberen contact op te nemen met de ontwikkelaar van het thema. Er zijn eventueel ook plugins die je hiermee kunnen helpen.
Nawoord
Het lokaal hosten van Google Fonts heeft meerdere voordelen, vooral op het gebied van privacy. Zoals je hebt kunnen zien kun je dit heel eenvoudig doen met behulp van een plugin of ervoor kiezen om het handmatig te doen.
Mocht je dit allemaal teveel gedoe vinden kun je ook altijd overwegen om een systeemfont te gebruiken. Dit ziet er misschien iets minder fraai uit, maar het is al lang niet meer zo lelijk als vroeger. Ik maak zelf ook geregeld gebruik van systeemfonts. Als de branding van je website niet van groot belang is, is dit een prima keuze in mijn ogen. Het zorgt bovendien ook voor een snellere laadtijd.