Host zelf Google fonts voor betere Core Web Vitals

Zelf Google Fonts hosten voor verbeterde Core Web Vitals

Google Fonts wordt gebruikt op 54% van alle websites volgens de 2025 Web Almanac. De meeste van die sites laden fonts van Google's servers. Dat is een probleem. Elk Google Fonts verzoek voegt externe connecties, render-blocking CSS en fontbestanden toe die je niet kunt preloaden, cachen of beheren. Zelf deze fonts hosten verwijdert al deze problemen en duurt ongeveer 10 minuten.

Laatst beoordeeld door Arjen Karel in februari 2026

Begrijpen van Core Web Vitals

De Core Web Vitals zijn drie statistieken die Google gebruikt als ranking signalen: LCP (laden), INP (interactiviteit), en CLS (visuele stabiliteit). Zelf fonts hosten verbetert voornamelijk LCP en CLS, en kan ook de First Contentful Paint (FCP) verbeteren.

Impact van Google Fonts op Core Web Vitals

Google Fonts, vaak toegevoegd in webpagina's om typografie en design te verbeteren, kan een aanzienlijke impact hebben op Core Web Vitals, voornamelijk op de Largest Contentful Paint (LCP) en de Cumulative Layout Shift (CLS).

Voor de meeste mensen waarmee ik spreek is dit nieuwe informatie. Het Google CDN wordt verondersteld het beste ter wereld te zijn. Dus waarom is Google Fonts slecht voor page speed?

1. Het "shared cache" argument is dood. Veel developers geloven nog steeds dat omdat Google Fonts zo populair is, bezoekers het font waarschijnlijk al in de cache hebben van een andere site. Dat was waar vóór 2020. Sinds Chrome v86 en Safari (die dit al sinds 2013 doet), partitioneren browsers hun HTTP cache op basis van het top-level domein. Dit betekent dat jouw site Google Fonts helemaal opnieuw downloadt voor elke nieuwe bezoeker, ongeacht welke andere sites ze hebben bezocht. Het performance voordeel van een shared CDN cache bestaat niet meer.

2. De stylesheet is nooit in de browser cache voor nieuwe bezoekers. Het eerste probleem met Google Fonts is dat het afhankelijk is van een externe stylesheet gehost door fonts.google.com of fonts.googleapis.com. Deze stylesheet kan niet worden hergebruikt door verschillende domeinen (zoals veel mensen lijken te denken). Dit betekent dat de render-blocking stylesheet nooit wordt geserveerd vanuit de supersnelle browser cache voor eerste bezoekers en de rendering van de pagina altijd zal vertragen.

3. Het vereist 2 connecties naar 2 nieuwe servers. Het tweede probleem is dat we om het CSS-bestand en de fontbestanden te downloaden verbinding moeten maken met 2 verschillende servers. Elke initiële connectie met een nieuwe server heeft aanzienlijke overhead en kost extra tijd. Tijd die we hadden kunnen besparen door de bestanden te serveren via onze reeds geopende connectie naar onze server. Om dit te vermijden adviseert Google om te preconnecten met hun domeinen. Dat verzacht het probleem enigszins, maar het is nog steeds verre van perfect

4. Je hebt beperkte controle over de font-display attributen. Hoewel Google Fonts je toestaat het font-display attribuut in te stellen, kun je dit alleen globaal definiëren. Dit betekent dat alle woff2-bestanden dezelfde font-display instelling krijgen.

5. De uiteindelijke locatie van het woff2-bestand is onbekend. Dit betekent dat we onze belangrijkste fonts niet kunnen preloaden. Dit betekent dat onze fontbestanden relatief laat in de wachtrij voor download worden geplaatst en we waarschijnlijk een zichtbare layout shift krijgen, veroorzaakt door de flash of unstyled text (FOUT). Lees meer over hoe je ervoor zorgt dat tekst zichtbaar blijft tijdens het laden van een webfont.

6. Je hebt geen controle over de fontbestanden. Je kunt ze niet verder subsetten, je kunt geen lange cache headers instellen en je kunt ze niet serveren via je eigen CDN.

<link rel="preconnect" href="https://fonts.googleapis.com" crossorigin>
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

Voordelen van zelf Google Fonts hosten

Zelf Google Fonts hosten houdt in dat je de fontbestanden vanaf je eigen servers serveert in plaats van te vertrouwen op externe Google servers. Deze aanpak kan verschillende voordelen opleveren:

1. Verbeterde leveringssnelheid van fonts: Zelf fonts hosten vermindert de afhankelijkheid van externe servers, wat leidt tot snellere levering van fonts en daardoor snellere rendering van tekstcontent. Deze verbetering kan een positieve invloed hebben op LCP, wat ervoor zorgt dat het grootste tekstelement sneller zichtbaar wordt. De 2025 Web Almanac laat zien dat self-hosting in de lift zit: 31,5% van de desktop sites host hun fonts nu uitsluitend zelf, ten opzichte van 28% in 2024.

2. Verminderde Layout Shifts: Door Google Fonts zelf te hosten, kun je bepalen hoe het font wordt geladen en weergegeven, waardoor de kans op layout shifts door vertraagde font rendering wordt geminimaliseerd. Dit helpt de algehele visuele stabiliteit van je webpagina te verbeteren en heeft een positief effect op CLS.

3. Volledige controle over caching en preloading: Wanneer je zelf host, ken je de exacte URL van elk fontbestand. Dat betekent dat je kritieke fonts kunt preloaden, agressieve cache headers kunt instellen (een jaar of meer) en fonts kunt serveren via dezelfde connectie als de rest van je pagina.

GDPR compliance

In januari 2022 heeft de regionale rechtbank van München geoordeeld dat het laden van Google Fonts van Google's servers de GDPR schendt, omdat het IP-adressen van bezoekers zonder toestemming doorgeeft aan Google. Zelf hosten elimineert dit probleem volledig, omdat er geen gegevens naar Google worden verzonden wanneer de fonts laden. Als jouw site Europese bezoekers heeft, is dit nog een reden om zelf te hosten.

Best Practices voor zelf Google Fonts hosten

Om je zelf-gehoste Google Fonts te optimaliseren voor betere Core Web Vitals performance, overweeg dan de volgende best practices te implementeren:

1. Gebruik alleen WOFF2 formaat: WOFF2 biedt de beste compressie (ongeveer 30% kleiner dan WOFF) en heeft 96%+ browser support. De enige browser die WOFF2 niet ondersteunt is Internet Explorer, die in juni 2022 de end-of-life status bereikte. Je hebt geen WOFF fallback meer nodig.

2. Font Subsetting: Om font bestandsgroottes verder te verkleinen, kun je font subsetting overwegen, wat inhoudt dat je alleen de tekens opneemt die nodig zijn voor de content van je webpagina. Dit kan leiden tot sneller laden van fonts en verbeterde Core Web Vitals. Google Fonts subset al via unicode-range, maar wanneer je zelf host kun je verder gaan met tools zoals fonttools.

3. Strategisch font-display attribuut: Configureer het font-display attribuut strategisch om tekst rendering te beheren tijdens het laden van het font. De "swap" waarde versnelt de First Contentful Paint door ervoor te zorgen dat fallback fonts worden weergegeven totdat het webfont volledig is geladen. De "optional" waarde slaat de font swap volledig over, wat layout shifts voorkomt door het fallback font nooit te vervangen. Een strategische mix van deze twee optimaliseert vaak zowel de Cumulative Layout Shift als de First Contentful Paint. Volgens de 2025 Web Almanac gebruikt 50% van de pagina's nu font-display: swap, maar slechts 0,5% gebruikt font-display: optional, wat de beste keuze is voor maximale CWV performance op niet-kritieke fonts.

4. Preload fonts: Zorg ervoor dat fonts zo vroeg mogelijk beschikbaar zijn door de belangrijkste fonts (maximaal 1 of 2) te preloaden met het link preload mechanisme. Neem altijd het crossorigin attribuut op, zelfs voor same-origin fonts, anders downloadt de browser het font twee keer. Slechts 12% van de pagina's preload hun fonts, dus dit is een makkelijke winst.

<link rel="preload" as="font" href="/fonts/inter-400.woff2" type="font/woff2" crossorigin>

Hoe zelf een Google font te hosten (de juiste manier)

Het downloaden en zelf hosten van een Google Font duurt ongeveer 10 minuten. Houd er rekening mee dat je altijd de licentie van het font moet controleren voordat je het gebruikt. De meeste Google Fonts zijn beschikbaar onder de SIL Open Font License, wat gratis gebruik toestaat, inclusief commercieel gebruik.

De snelste methode is om google-webfonts-helper te gebruiken, waarmee je elk Google Font als WOFF2-bestanden kunt downloaden met kant-en-klare CSS. Maar als je het handmatig wilt doen om precies te begrijpen wat er gebeurt, volg dan deze stappen:

1. Ga naar de Google Fonts website via fonts.google.com.

2. Selecteer het font dat je wilt gebruiken en kies de font weights die je wilt opnemen.

3. Klik op de fontpagina in de bovenste balk op de 'selected families knop'. Daar vind je de link naar de door Google gehoste stylesheet.

   

4. Kopieer de URL van deze stylesheet en open deze in je browser. Je ziet nu alle font-face declaraties die beschikbaar zijn voor het font.

   

5. Je merkt misschien op dat er meer dan 1 woff2-bestand is, ook al hebben we maar één fontbestand gebruikt. Dat komt doordat er een ander fontbestand is voor verschillende unicode ranges. Om te leren welke fonts we moeten downloaden, moet je tijdelijk de door Google gehoste stylesheet aan je website toevoegen. Gebruik de sneltoets Ctrl-Shift-I om je Chrome DevTools te openen. Navigeer naar de tab network en klik op Font. Ververs nu de pagina (Ctrl-R) om te zien welk font wordt geactiveerd voor download.

6. Match deze naam van het fontbestand met het overeenkomstige woff2-bestand in de stylesheet. Nu weet je welk fontbestand er voor jouw website wordt gebruikt!

7. De volgende stap is om de volledige font URL te kopiëren en deze te openen in je browser. Dit triggert een download voor dit fontbestand. Kopieer dit bestand naar je website.

8. Kopieer de CSS voor het gebruikte webfont in stap 7 en plak dit in je stylesheet. Vergeet niet om de URL van de Google CDN te wijzigen naar je eigen server (bijvoorbeeld '/fonts/inter-400.woff2').

9. Preload het font (als het een visueel belangrijk font is).

Nu heb je met succes het Google Font van jouw keuze gedownload en zelf gehost.

Een praktijkvoorbeeld

Hier is een compleet voorbeeld met behulp van het Inter font waarbij alle best practices zijn toegepast: preloading, alleen WOFF2, een strategische font-display waarde, en een system font fallback.

<head>
  <title>Zelf gehoste Google Fonts</title>
  <!-- preload het font (crossorigin is vereist, zelfs voor same-origin fonts) -->
  <link rel="preload" as="font" href="/fonts/inter-400.woff2" type="font/woff2" crossorigin>
  <style>
    /* Zelf gehost Inter font met WOFF2 formaat */
    @font-face {
      font-family: 'Inter';
      font-style: normal;
      font-weight: 400;
      src: url('/fonts/inter-400.woff2') format('woff2');
      font-display: optional;
    }

    /* Fallback naar system-ui font */
    body {
      font-family: 'Inter', system-ui, sans-serif;
    }
  </style>
</head>
<body>
  <h1>Welkom op Mijn Website</h1>
  <p>Deze pagina gebruikt Inter met een system-ui fallback.</p>
</body>

Monitor de impact

Na het overstappen op zelf gehoste fonts, verifieer je de verbetering met Real User Monitoring. In onze CoreDash-data zien sites die hun fonts zelf hosten met de juiste preloading een mediane LCP-verbetering van 180ms vergeleken met het laden vanaf het Google Fonts CDN. Volg je LCP, CLS en FCP na verloop van tijd om er zeker van te zijn dat de wijziging werkt.