Google Fonts zelf hosten voor betere Core Web Vitals

Google Fonts zelf hosten voor betere Core Web Vitals

Volgens het 2025 Web Almanac gebruikt 54% van alle websites Google Fonts. De meeste van die sites laden fonts vanaf de servers van Google. Dat is een probleem. Elk Google Fonts-request zorgt voor externe verbindingen, render-blocking CSS en fontbestanden die je niet kunt preloaden, cachen of beheren. Host je diezelfde fonts zelf, dan los je al deze problemen op. Het kost je ongeveer 10 minuten.

Laatst beoordeeld door Arjen Karel in februari 2026

Core Web Vitals begrijpen

De Core Web Vitals zijn drie metrics die Google gebruikt als rankingsignalen: LCP (laadtijd), INP (interactiviteit) en CLS (visuele stabiliteit). Fonts zelf hosten verbetert vooral de LCP en CLS, en kan ook de First Contentful Paint (FCP) verbeteren.

Impact van Google Fonts op Core Web Vitals

Google Fonts wordt vaak toegevoegd voor betere typografie en vormgeving, maar kan een flinke impact hebben op de Core Web Vitals — vooral op de Largest Contentful Paint (LCP) en de Cumulative Layout Shift (CLS).

Voor de meeste mensen die ik spreek is dit nieuw. Het CDN van Google zou het beste ter wereld moeten zijn. Waarom is Google Fonts dan slecht voor je laadsnelheid?

1. Het argument van de "shared cache" is verleden tijd. Veel developers denken nog steeds dat bezoekers het font al gecachet hebben van een andere site, omdat Google Fonts zo populair is. Vóór 2020 klopte dat. Sinds Chrome v86 en Safari (die dit al sinds 2013 doet) partitioneren browsers hun HTTP-cache op basis van het top-level domein. Hierdoor downloadt je site Google Fonts voor elke nieuwe bezoeker helemaal opnieuw, ongeacht welke andere sites die heeft bezocht. Het prestatievoordeel van een gedeelde CDN-cache bestaat niet meer.

2. De stylesheet staat nooit in de browsercache voor nieuwe bezoekers. Het eerste probleem met Google Fonts is dat het leunt op een externe stylesheet op fonts.google.com of fonts.googleapis.com. Verschillende domeinen kunnen deze stylesheet niet hergebruiken (wat veel mensen wel denken). Hierdoor komt de render-blocking stylesheet voor nieuwe bezoekers nooit uit de supersnelle browsercache en vertraagt dit altijd het renderen van de pagina.

3. Er zijn 2 verbindingen naar 2 nieuwe servers nodig. Het tweede probleem: om het CSS-bestand en de fontbestanden te downloaden, moet je verbinden met 2 verschillende servers. Elke nieuwe verbinding met een server heeft flinke overhead en kost extra tijd. Tijd die we hadden kunnen besparen door de bestanden te serveren via de al openstaande verbinding met onze eigen server. Om dit te voorkomen adviseert Google een preconnect naar hun domeinen. Dat verzacht het probleem iets, maar het is nog altijd verre van ideaal

4. Je hebt beperkte controle over het font-display-attribuut. Google Fonts laat je het font-display-attribuut wel instellen, maar alleen globaal. Hierdoor krijgen alle woff2-bestanden dezelfde font-display-instelling.

5. De uiteindelijke locatie van het woff2-bestand is onbekend. Hierdoor kunnen we onze belangrijkste fonts niet preloaden. De fontbestanden belanden daardoor pas relatief laat in de download-queue, met waarschijnlijk een zichtbare layout shift als gevolg door de flash of unstyled text (FOUT). Lees meer over hoe je zorgt dat tekst zichtbaar blijft tijdens het laden van webfonts.

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

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

Voordelen van Google Fonts zelf hosten

Google Fonts zelf hosten betekent dat je de fontbestanden vanaf je eigen server serveert in plaats van via externe Google-servers. Dat levert verschillende voordelen op:

1. Snellere levering van fonts: Door fonts zelf te hosten ben je niet meer afhankelijk van externe servers. Fonts worden sneller geleverd en tekst sneller gerenderd. Dit heeft een positief effect op de LCP: het grootste tekstelement is sneller zichtbaar. Het 2025 Web Almanac laat zien dat self-hosting in de lift zit: 31,5% van de desktopsites host fonts nu uitsluitend zelf, vergeleken met 28% in 2024.

2. Minder layout shifts: Host je Google Fonts zelf, dan bepaal je zelf hoe het font laadt en wordt weergegeven. Daarmee verklein je de kans op layout shifts door vertraagde font-rendering. Dit verbetert de visuele stabiliteit van je pagina en heeft een gunstig effect op de CLS.

3. Volledige controle over caching en preloading: Host je zelf, dan weet je de exacte URL van elk fontbestand. Zo kun je kritieke fonts preloaden, agressieve cache-headers instellen (een jaar of langer) en fonts serveren over dezelfde verbinding als de rest van je pagina.

GDPR-compliance

In januari 2022 oordeelde de rechtbank van München dat het laden van Google Fonts vanaf Google-servers in strijd is met de AVG/GDPR, omdat IP-adressen van bezoekers zonder toestemming naar Google worden doorgestuurd. Host je fonts zelf, dan speelt dit probleem helemaal niet: er gaan geen gegevens naar Google bij het laden van fonts. Heeft je site Europese bezoekers, dan is dit nóg een reden om zelf te hosten.

Best practices voor het zelf hosten van Google Fonts

Wil je zelf gehoste Google Fonts optimaliseren voor de beste Core Web Vitals-scores? Gebruik dan deze best practices:

1. Gebruik alleen WOFF2: WOFF2 biedt de beste compressie (ongeveer 30% kleiner dan WOFF) en heeft 96%+ browserondersteuning. De enige browser zonder ondersteuning voor WOFF2 is Internet Explorer, en die is sinds juni 2022 end-of-life. Een WOFF-fallback heb je dus niet meer nodig.

2. Font subsetting: Wil je fontbestanden nog kleiner maken, pas dan font subsetting toe. Hierbij neem je alleen de tekens op die je pagina nodig heeft. Dat zorgt voor snellere laadtijden en betere Core Web Vitals. Google Fonts subset standaard al op unicode-range, maar host je zelf, dan kun je nog verder gaan met tools zoals fonttools.

3. Strategisch font-display-attribuut: Stel het font-display-attribuut bewust in om te bepalen hoe tekst rendert terwijl het font laadt. De waarde "swap" versnelt de First Contentful Paint: fallback-fonts zijn direct zichtbaar totdat het webfont binnen is. De waarde "optional" slaat de font swap juist helemaal over en voorkomt layout shifts doordat het fallback-font nooit vervangen wordt. Een slimme combinatie van beide optimaliseert vaak zowel de Cumulative Layout Shift als de First Contentful Paint. Volgens het 2025 Web Almanac gebruikt nu 50% van de pagina's font-display: swap, maar slechts 0,5% font-display: optional — de beste keuze voor maximale CWV-prestaties bij niet-kritieke fonts.

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

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

Zo host je een Google Font zelf (op de juiste manier)

Een Google Font downloaden en zelf hosten duurt ongeveer 10 minuten. Controleer vooraf altijd de licentie van het font. De meeste Google Fonts vallen onder de SIL Open Font License, waarmee gratis en commercieel gebruik is toegestaan.

De snelste methode is google-webfonts-helper: hiermee download je elk gewenst Google Font als WOFF2-bestanden inclusief kant-en-klare CSS. Wil je het handmatig doen om precies te begrijpen wat er gebeurt? Volg dan deze stappen:

1. Ga naar de website van Google Fonts op fonts.google.com.

2. Kies het font dat je wilt gebruiken en selecteer de gewenste font weights.

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

   

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

   

5. Het valt je misschien op dat er meer dan 1 woff2-bestand staat, terwijl we maar één font kozen. Dat komt doordat er voor verschillende unicode-ranges aparte fontbestanden zijn. Om te achterhalen welk fontbestand je nodig hebt, voeg je de stylesheet van Google tijdelijk toe aan je website. Open Chrome DevTools met de sneltoets Ctrl-Shift-I. Ga naar het tabblad Network en klik op Font. Vernieuw de pagina (Ctrl-R) om te zien welk font gedownload wordt.

6. Zoek deze bestandsnaam op bij het bijbehorende woff2-bestand in de stylesheet. Nu weet je welk fontbestand jouw website gebruikt!

7. Kopieer vervolgens de volledige URL van dit font en open die in je browser. Daarmee download je het fontbestand. Kopieer dit bestand naar je website.

8. Kopieer de CSS van het gebruikte webfont uit stap 7 en plak die in je eigen stylesheet. Pas de URL aan van het Google-CDN naar je eigen server (bijvoorbeeld '/fonts/inter-400.woff2').

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

Je hebt nu het gewenste Google Font succesvol gedownload en zelf gehost.

Een praktijkvoorbeeld

Dit is een compleet voorbeeld met het font Inter waarin alle best practices zijn toegepast: preloading, alleen WOFF2, een strategische font-display-waarde en een fallback naar het systeemfont.

<head>
  <title>Self-Hosted Google Fonts</title>
  <!-- preload the font (crossorigin is required, even for same-origin fonts) -->
  <link rel="preload" as="font" href="/fonts/inter-400.woff2" type="font/woff2" crossorigin>
  <style>
    /* Self-hosted Inter font with WOFF2 format */
    @font-face {
      font-family: 'Inter';
      font-style: normal;
      font-weight: 400;
      src: url('/fonts/inter-400.woff2') format('woff2');
      font-display: optional;
    }

    /* Fallback to system-ui font */
    body {
      font-family: 'Inter', system-ui, sans-serif;
    }
  </style>
</head>
<body>
  <h1>Welcome to My Website</h1>
  <p>This page uses Inter with a system-ui fallback.</p>
</body>

Monitor de impact

Controleer na de overstap naar zelf gehoste fonts de verbetering met Real User Monitoring. In onze CoreDash-data zien sites die hun fonts zelf hosten en goed preloaden een mediane LCP-verbetering van 180ms vergeleken met laden via het Google Fonts-CDN. Blijf je LCP, CLS en FCP in de loop van de tijd volgen om zeker te weten dat de aanpassing werkt.