Los 'Ensure text remains visible during webfont load' op

Zorg ervoor dat de tekst zichtbaar blijft tijdens het laden van webfonts

Voordat webfonts bestonden, zaten webdesigners vast aan slechts een klein aantal vooraf geïnstalleerde lettertypen. Webfonts geven je de vrijheid om elk lettertype op een website te gebruiken.

Dat klinkt natuurlijk leuk, maar webfonts hebben ook hun nadelen; ze vertragen de laadsnelheid van de pagina op verschillende manieren.

Webfonts zijn meestal grote bestanden die standaard niet op een computer zijn geïnstalleerd. Webfonts moeten dus worden gedownload voordat ze kunnen worden gebruikt. Tijdens het downloaden van een webfont wordt de tekst op een webpagina tijdelijk verborgen totdat het webfont volledig is geladen. Dit zorgt voor een slechte user experience; niemand wil te lang naar een leeg scherm staren.

Zodra het webfont is geladen en gerenderd, vervangt de browser de "onzichtbare tekst" door de uiteindelijke tekst met het nieuwe webfont. Dit moment wordt de Flash of Invisible Text (FOIT) genoemd. Deze FOIT is wat ervoor zorgt dat de foutmelding "Ensure text remains visible during webfont load" verschijnt.

Laad je een webfont op je pagina en neem je geen voorzorgsmaatregelen om deze Flash of Invisible Text te voorkomen? Terwijl je de PageSpeed analyseert op Lighthouse, verschijnt de volgende melding: "Ensure text remains visible during webfont load". Dit vertelt je hoeveel tijd je zou kunnen besparen door de tekst zichtbaar te maken voordat het webfont is geladen. Voor 1 enkel lettertype is dit al snel 100ms.

Waarom is onzichtbare tekst slecht voor de pagespeed?

Onzichtbare tekst zal de uiteindelijk gemeten laadtijd van een pagina niet echt vertragen. Dus waarom vindt Lighthouse het dan zo'n probleem?

Google vindt het belangrijk dat een webpagina de best mogelijke user experience biedt. De user experience kan worden verbeterd door content zo snel mogelijk op de pagina te tonen. Onzichtbare tekst heeft direct invloed op je First Contentful Paint (FCP) omdat de browser tekst die hij verbergt niet kan painten. Als tekst je Largest Contentful Paint (LCP) element is, vertraagt FOIT die metric ook. Vergelijk de twee filmstrip-versies van onze homepage hieronder:

Flash of Invisible Text

Geen flash of invisible text met display:swap

Zoals je kunt zien, waren de twee pagina's op exact hetzelfde moment klaar met laden. Toch ziet de laatste versie van de website er voor bezoekers een stuk beter uit. Bezoekers kunnen direct beginnen met lezen.

Daarom is het slim om tekst toch te tonen, niet in het uiteindelijke lettertype, maar in een "fallback" lettertype. Op deze manier denkt de bezoeker dat je pagina echt supersnel laadt.

Een korte opfrisser: FOIT en FOUT

Voordat we verder gaan, is het nuttig om de volgende concepten te onderscheiden: FOIT en FOUT. FOIT staat voor de Flash of Invisible Text en treedt op wanneer webfonts niet zichtbaar zijn tijdens het laden. Je kunt dit mitigeren door een fallback lettertype toe te voegen. Wanneer het fallback lettertype wordt vervangen door het webfont, wordt dit FOUT, Flash of Unstyled Text genoemd.

Maak webfonts zichtbaar tijdens het laden

Er zijn twee manieren om webfonts zichtbaar te maken tijdens het laden: ten eerste via de CSS font-display waarde; ten tweede door gebruik te maken van een fallback lettertype via een class. Beide methoden hebben voor- en nadelen, die ik hieronder zal bespreken.

Methode 1: Font-display:swap

Font-display is een CSS-descriptor die beschikbaar is voor alle moderne browsers. De font-display descriptor bepaalt hoe een lettertype wordt weergegeven op basis van of en wanneer het is gedownload. Font-display wordt gebruikt in een @font-face regel.

Er zijn vier font-display waarden die je moet kennen:

• swap: Toont onmiddellijk het fallback lettertype en verwisselt dit vervolgens voor het webfont zodra dit is geladen. Het swap window is oneindig, dus het webfont vervangt het fallback lettertype uiteindelijk altijd. Het beste voor merklettertypen en koppen.
• optional: Toont onmiddellijk het fallback lettertype. De browser beslist of er wordt gewisseld op basis van de verbindingssnelheid. Geen swap betekent nul layout shift. Het beste voor bodytekst waarbij prestaties de prioriteit hebben.
• fallback: Toont onmiddellijk het fallback lettertype en geeft het webfont vervolgens een kort window (~3 seconden) om te laden. Als het de window mist, blijft het fallback lettertype staan. Een middenweg tussen swap en optional.
• block: Verbergt tekst tot maximaal 3 seconden terwijl het lettertype laadt. Dit is de oorzaak van FOIT. Gebruik dit niet tenzij je een specifieke reden hebt (zoals icon fonts).

Volgens de 2025 Web Almanac gebruikt slechts 50% van de sites font-display: swap, terwijl 25% nog steeds block gebruikt. Dat betekent dat een kwart van het web nog steeds onzichtbare tekst toont tijdens het laden van lettertypen.

Gebruik de swap-waarde om FOIT te vermijden en de tekst zo snel mogelijk op het scherm te laten verschijnen. Zodra we de waarde font-display: swap instellen in de @font-face regel, worden de standaardlettertypen van het systeem gebruikt terwijl de pagina laadt totdat de webfonts zijn geladen. Dit helpt de bezoeker de tekst op de pagina direct te lezen.

Google Fonts

Wanneer je Google Fonts gebruikt, kun je de font-display: swap methode gebruiken met een eenvoudige "&display=swap" in de stylesheet of embed code.

<!-- via een externe stylesheet -->
<link href="https://fonts.googleapis.com/css?family=Open+Sans&display=swap" rel="stylesheet">

<!-- via de import methode (langzamer, niet aanbevolen) -->
<style>
 @import url('https://fonts.googleapis.com/css?family=Open+Sans&display=swap');
</style>

De @import methode is render-blocking en dwingt de browser om stylesheets opeenvolgend te downloaden. De <link> methode is sneller omdat de browser de font stylesheet eerder in het parsing proces kan ontdekken.

Maar we zijn geen fan van beide benaderingen. Het is bijna altijd veel sneller om webfonts zelf te hosten. Het geeft je meer controle over het "preloading" proces van de fonts. Je kunt de reeds bestaande HTTP/2 verbinding gebruiken en je hoeft geen extra stylesheet te downloaden.

Lokale fonts

@font-face {
 font-family: "Open Sans";
 font-weight: 400;
 font-style: normal;
 src: url("OpenSans400.woff2") format("woff2");
 font-display: swap
}

WOFF2 is alles wat je nodig hebt. Het wordt ondersteund in elke moderne browser en biedt de beste compressie. Volgens de 2025 Web Almanac host 72% van de sites hun lettertypen nu zelf, en is WOFF2 goed voor 65% van alle webfont verzoeken. Er is geen reden meer om WOFF of TTF nog als fallback formaten op te nemen.

Voorkom layout shift bij het verwisselen van lettertypen

Er is echter een addertje onder het gras met font-display: swap. Wanneer de browser wisselt van het fallback lettertype naar het webfont, verandert de tekst vaak van grootte. Verschillende lettertypen hebben verschillende tekenbreedtes, ascent hoogtes en regelafstanden. Deze verandering in grootte veroorzaakt Cumulative Layout Shift (CLS), wat een Core Web Vital is.

De oplossing is de size-adjust CSS descriptor. Het schaalt het fallback lettertype zodat het overeenkomt met de afmetingen van je webfont, waardoor de swap weinig tot geen zichtbare shift veroorzaakt. Browserondersteuning is meer dan 93%, inclusief Safari 17+.

/* Definieer een passend fallback lettertype */
@font-face {
 font-family: "Open Sans Fallback";
 src: local("Arial");
 size-adjust: 105%;
 ascent-override: 110%;
 descent-override: 25%;
 line-gap-override: 0%;
}

/* Gebruik beide in je font stack */
body {
 font-family: "Open Sans", "Open Sans Fallback", sans-serif;
}

De ascent-override, descent-override en line-gap-override descriptors geven nog nauwkeurigere controle over de verticale metrics. Deze werken in Chrome, Firefox en Edge maar nog niet in Safari, dus behandel ze als progressive enhancement. De size-adjust eigenschap alleen al maakt een merkbaar verschil.

Op sites die worden gemonitord door CoreDash, hebben pagina's die font-display: swap combineren met font metric overrides 75% minder font-gerelateerde CLS dan pagina's die alleen swap gebruiken.

Methode 2: Fonts met een class

De tweede manier om lettertypen zichtbaar te maken tijdens het laden, is door te werken met classes. Deze classes worden meestal (maar niet altijd) toegevoegd aan het <body> of <html> element.

Het voordeel van deze methode is dat je meer controle hebt over het fallback lettertype en de timing van de Flash of Unstyled Text.

Deze methode werkt als volgt: Geef in je stylesheet aan dat een pagina initieel moet worden gerenderd met een lettertype (het fallback lettertype). Vervolgens laad je het webfont in via de JavaScript FontFace API of via preloading. Nadat dit lettertype is geladen, voeg je een class toe aan je pagina. De class zorgt ervoor dat het webfont wordt geactiveerd.

Waarom zou je dat doen, vraag je je misschien af? Dit doe je om meer controle te krijgen over het fallback lettertype. Je kunt het fallback lettertype weergeven met een grotere regelafstand of een andere grootte, zodat het beter overeenkomt met het webfont. Dit voorkomt layout shifts.

Wanneer je meerdere webfonts gebruikt, kun je de FontFace API methode gebruiken om alle lettertypen in één keer om te wisselen. Dit bespaart veel browser repaints. Persoonlijk ben ik geen fan van deze methode; dit zorgt ervoor dat FOUT plaatsvindt nadat het laatste lettertype is geladen. Dat is dus altijd later dan nodig is.

Font met een class via de FontFace API:

<style>
  // fallback lettertype met een .9rem font-size
  html{
    font-family: sans-serif;
    font-size:.9rem;
  }

  // webfont met een 1rem font-size
  html.fl{
    font-family: 'webfont';
    font-size:1rem;
  }
</style>

<script>
var font = new FontFace("webfont", "url(/font.woff2)", {
  style: 'normal', unicodeRange: 'U+000-5FF', weight: '400'
});

// wacht niet op de render tree, start direct een fetch!
font.load().then(function() {
  document.fonts.add(font);
  document.documentElement.classList.add("fl")
});
</script>

Via een preload link

De tweede methode is via een preload link. Preload het font zoals hieronder beschreven. Zodra dit is gebeurd, wissel je de class van het <html> element.

<link
  rel="preload"
  href="/webfont.woff2"
  as="font"
  type="font/woff2" crossorigin
  onload="document.documentElement.classList.add('fl')">

<style>
  // fallback lettertype met een .9rem font-size
  html{
    font-family: sans-serif;
    font-size:.9rem;
  }

  // webfont met een 1rem font-size
  html.fl{
    font-family: 'webfont';
    font-size:1rem;
  }

  // @font-face, pas geactiveerd zodra de .fl class is toegevoegd aan de html tag
  @font-face{
    font-family:'Open Sans';
    font-style:normal;
    font-weight:400;
    font-display:swap;
    src: url(/webfont.woff2) format("woff2");
    unicode-range:U+000-00FF;
  }
</style>

Extra tips en tricks

1. Preload altijd zichtbare lettertypen. Lettertypen worden standaard pas gedownload als ze daadwerkelijk op een pagina worden gebruikt. Als je een webfont nodig hebt, preload het dan zodat het sneller beschikbaar is.
2. Wil je FOIT en FOUT volledig vermijden? Gebruik font-display: optional in combinatie met preloading.
3. Webfonts zelf hosten is altijd sneller dan webfonts via Google Fonts of een ander extern CDN.

Wil je verifiëren dat je font loading strategie daadwerkelijk de echte user experience verbetert? Gebruik Real User Monitoring om je FCP en CLS te tracken voor en na het doorvoeren van wijzigingen.