(Google) Webfonts: tips, tricks & optimalisaties

Het kiezen van een goed font is van essentieel belang voor jouw website. Maar wat is precies de definitie van een ‘goed’ webfont? Als je deze vraag stelt aan een webdesigner, dan krijg je hier waarschijnlijk een ander antwoord op dan wanneer je hem stelt aan een developer.

Dit komt omdat omdat er is helaas geen ultiem webfont is, als je kijkt naar zowel het oogpunt van designers als developers. Waar een designer zal kiezen voor een uniek en gaaf font, is een webdeveloper niet altijd blij met deze keuze door beperkingen of performance-issues.

Sta je momenteel zelf voor de keuze om een font te kiezen voor je website en ben je benieuwd naar mijn visie? Ik vertel je hier graag meer over zodat ik je kan helpen met het maken van de beste keuze.

Wat is een webfont?

De term webfont is ontstaan door het gebruik van lettertypes (fonts) binnen websites. Het is een beetje een dubbelzinnige term die enerzijds gebaseerd is op de techniek die het mogelijk maakt om fonts te gebruiken op een website. En anderzijds – de meest voor de hand liggende reden – gebaseerd is op de lettertypes die dankzij deze technologie op het web gebruikt kunnen worden.

Stormachtige (web)ontwikkeling door webfonts

In het begin (lees: rond het jaar 1995) werd het gebruik van fonts beperkt door lettertypes die standaard geïnstalleerd waren op de systemen van webbezoekers. Wanneer er een font gebruikt werd op een site die dat systeem niet kende, werd deze niet getoond en had het geen effect op de weergave van het font. De eerste ontwikkelingen hierin maakten het mogelijk om aan te geven in de HTML (en later ook in CSS) welk lettertype elementen binnen de website krijgen.

In deze periode werd vaak gekozen voor een ‘veilig lettertype’. Dit waren vaak lettertypes als:

• Arial
• Verdana
• Comic Sans
• Verdena
• Trebuchet

Deze fonts worden ook wel aangeduid als ‘Core fonts for the Web’. Destijds werden deze fonts standaard geïnstalleerd op alle (Microsoft) computers. Door de beperkte keuze van deze lettertypes zagen veel webdesigns (lees: teksten) er in die tijd hetzelfde uit.

Font stacks

Om er zeker van te zijn dat een website goed getoond wordt, kan gebruik worden gemaakt van een ‘font stack’. Dit is een opsomming van een aantal vergelijkbare fonts. Als terugvalmogelijkheid kan hierbij nog één van de generieke fonts worden gedefinieerd. Dit zorgt ervoor dat de browser kan terugvallen op het standaardlettertype voor deze familie wanneer het oorspronkelijke (voorkeurs)font ontbreekt.

Nieuwe technologieën

Door de vele ontwikkelingen in de technieken van de afgelopen decennia zijn er diverse methodes bij gekomen om extra fonts te gebruiken voor een unieke website. Waar rond 1998 (tijdens de intrede van CSS2) de mogelijkheid om fonts te ‘embedden’ middels de @font-face functie is ontstaan, is deze sinds de invoering van CSS3 door W3C als standaardmethode vastgesteld.

De mogelijkheid om fonts te ‘embedden’ (lees: downloaden vanaf het internet), zijn de mogelijkheden van de tekstweergave op het web drastisch verbetert en is het in principe mogelijk om elk gewenst lettertype te gebruiken.

Openbare en gelicentieerde fonts

Niet elk font is zomaar te gebruiken op jouw website, een belangrijk bezwaar is dat op bepaalde fonts een auteursrecht geldt. Dit houdt in dat de makers en/of rechthebbenden een licentie vereisen voor het gebruik. Een licentie kan in dat geval aangevraagd worden en afhankelijk van het font kan hier best een behoorlijk prijskaartje aan hangen.

Gelukkig zijn er ook een heleboel fonts die vrij te gebruiken zijn. Eén van de grootste aanbieders hiervan is Google. In 2010 besloot Google de dienst ‘Google Fonts’ te lanceren. Dit is een bibliotheek met honderden open source fonts. Vanuit deze dienst kunnen de fonts gedownload of gehost worden.

Waarom Google webfonts?

Wij adviseren vrijwel altijd om één van deze fonts te gebruiken voor jouw website. Naast het feit dat deze fonts gratis (licentie-vrij) zijn en eenvoudig te implementeren, zijn er een aantal grote voordelen, namelijk:

1. Google fonts worden over het algemeen snel ingeladen, ze zijn lichtgewicht en de Google hosting is snel, zo bespaar je kostbare laadtijd.
2. De fonts worden altijd ondersteund door browsers, geen verschillende weergaves op verschillende apparaten / browsers.
3. Ze zijn geoptimaliseerd voor het web en de leesbaarheid daarvan, waardoor je geen strafpunten in de tools of issues qua gebruiksvriendelijkheid krijgt.
4. Het aanbod is enorm, inmiddels bevat de bibliotheek meer dan 999 fonts!

Met 999+ Google webfonts kunnen we het ons goed voorstellen dat je door de bomen het bos niet meer ziet. Collega Nienke deelt daarom graag haar top 10 Google webfonts met je! Verdiep je in haar artikel en doe inspiratie op!

Webfonts en laadtijden

Bij verkeerd gebruiken van webfonts kan de laadtijd van een webpagina enorm oplopen. De omvang kan in extreme gevallen zelfs oplopen naar enkele MB’s. Wij adviseren om maximaal drie verschillende font-families te gebruiken en de “font-weights” tot een minimum te beperken.

Het ‘verkeerd gebruiken’ van een webfont kan niet alleen invloed hebben op de laadtijd van een website, maar het kan ook strafpunten opleveren voor de Core Web Vitals van Google.

Largest Contentful Paint (LCP)
Het laden van webfonts kan een vertraging veroorzaken bij het weergeven van het grootste inhoudselement (render-blocking) op de pagina. Dit kan gebeuren als de webfonts niet geoptimaliseerd zijn of er te veel variaties worden geladen. Hierdoor duurt het langer voordat de pagina visueel compleet is.

First Input Delay (FID)
Het heeft indirect ook impact op de First Input Delay. Wanneer de browser bezig is met het laden/renderen van de webfonts, kan dit andere kritieke taken vertragen. Denk hierbij bijvoorbeeld aan het reageren op een actie van de gebruiker.

Cumulative Layout Shift
Webfonts kunnen lay-out verschuivingen veroorzaken, waardoor je strafpunten krijgt op je CLS-score. Wanneer de browser in eerste instantie een fallback-lettertype weergeeft en deze aanpast naar het uiteindelijke lettertype (font-display: swap), dan kan dit een lay-out verschuiving (CLS-penalty) opleveren. Oftewel: een slechte gebruikerservaring.

Onze tips voor webfont optimalisatie

Met de keuze voor een Google webfont ben je al goed op weg! Maar dat neemt niet weg dat je niet alsnog strafpunten in Google kunt krijgen als je deze fonts niet goed gebruikt. Uiteraard geven we je een aantal tips en tricks mee om jouw website te optimaliseren op het gebied van webfonts.

1. Maak gebruik van een minimum aantal fonts en variaties
   We hebben het al eerder benoemd in dit artikel, maar kies tijdens het webdesign zo min mogelijk verschillende font-families uit. Ieder font en iedere variatie moet ingeladen worden en hierdoor neemt de laadtijd van je website alleen maar toe.
2. Gebruik moderne (web geoptimaliseerde) formaten
   Het modernste en meest aangeraden format voor webfonts is op dit moment het WOFF2 formaat. Deze is al voorzien van een goede compressie, waardoor deze sneller inlaadt dan bijvoorbeeld een WOFF, EOT of zelfs TTF formaat.
3. Gebruik het CSS-property ‘font-display’ om het gedrag te beïnvloeden
   Zoals hierboven al benoemd, kan het bij verkeerd gebruik een CLS-penalty opleveren, en dit wil je ongetwijfeld voorkomen. De beste keuze hangt hierbij ook af van een specifieke gebruikssituatie en de prioriteiten. Test hierbij wat voor jou het beste werkt. Grote kans dat dit “swap” of “fallback” zal zijn.
4. Host zelf je webfonts lokaal
   Host zelf de webfonts om externe afhankelijkheden te voorkomen en meer controle te hebben over caching.
5. Preload (kritieke) webfonts
   Maak een webfont en geef het prioriteit om in te laden. Door bovenstaande tips zou het al niet te veel laadtijd moeten kosten om dit te realiseren. Dit kun je door middel van onderstaand script implementeren:

<link rel=”preload” href=”/assets/Pacifico-Bold.woff2″ as=”font” type=”font/woff2″ crossorigin>

Ga aan de slag met (web)fonts

Het begint bij het simpel en vooral beperkt houden van het aantal (web)fonts dat jij wilt gebruiken voor jouw webdesign. Als dat is gelukt, is het belangrijk om deze fonts op de juiste manier te implementeren en optimaliseren tijdens het bouwen van de site. Zo zorg jij ervoor dat jij een unieke website hebt die op alle apparaten goed én snel getoond wordt!

Heb jij naar aanleiding van dit artikel vragen of ben jij benieuwd of wij jou kunnen helpen bij het optimaliseren van je WordPress webdesign? We denken graag met je mee! Onze designers en developers staan voor je klaar.