Je tekst speelt verstoppertje: zet font-display op swap

Gebruik je een eigen lettertype, dan moet de browser dat eerst downloaden. Sommige browsers houden je tekst in de tussentijd onzichtbaar. Je bezoeker ziet dan een pagina met plekken waar straks tekst komt.

In het kud-rapport Je tekst speelt verstoppertje

Waarom het uitmaakt

Onzichtbare tekst betekent dat bezoekers langer moeten wachten voordat ze iets kunnen lezen, terwijl de tekst eigenlijk allang binnen is.

Met font-display: swap toont de browser meteen een standaardlettertype en wisselt hij om zodra je eigen lettertype binnen is.

Zo los je het op

Zet font-display: swap in elke @font-face-regel in je CSS.
Gebruik je Google Fonts, voeg dan &display=swap toe aan de link. Google Fonts zet dat in nieuwe links standaard al.
Laad alleen de gewichten en stijlen die je echt gebruikt. Vier gewichten met cursief is acht bestanden.
Gebruik het formaat WOFF2; dat is het kleinst.

@font-face {
  font-family: "Merk";
  src: url("/fonts/merk.woff2") format("woff2");
  font-display: swap;
}

Op jouw platform

WordPress: Veel thema's laden Google Fonts zelf. Plugins als OMGF kunnen fonts lokaal hosten en font-display instellen.

Veelgestelde vragen

Verspringt mijn pagina niet als het lettertype wisselt?

Een beetje, als het standaardlettertype veel verschilt. Kies een vergelijkbaar fallback-lettertype in je CSS om dat klein te houden.

Is het lokaal hosten van Google Fonts beter?

Vaak wel: het scheelt een verbinding met een extra server, en je stuurt geen IP-adressen van bezoekers naar Google.