Webfont-optimalisatie: font-display en FOUT/FOIT

Een solide strategie voor web font-optimalisatie bepaalt het verschil tussen een pagina die snel laadt en een die met visuele stabiliteit laadt. Wanneer lettertypen te laat bij de browser aankomen, blijft tekst ofwel onzichtbaar (FOIT), ofwel wordt hij eerst in een terugvallettertype getekend en springt dan tijdens het wisselen (FOUT). In dit artikel leg ik uit hoe je beide gedragingen beheerst met font-display, preload, WOFF2 en subsetting, en hoe je daarbij je Core Web Vitals-scores beschermt.

Het verschil tussen FOUT en FOIT

Beide afkortingen beschrijven het overgangsmoment terwijl een eigen lettertype laadt:

• FOIT (Flash of Invisible Text): de browser tekent geen tekst totdat het lettertype binnen is. De gebruiker ziet een lege ruimte, en als het lettertype traag is kan de inhoud seconden onzichtbaar blijven.
• FOUT (Flash of Unstyled Text): de browser toont de tekst eerst in een systeem-terugvallettertype en tekent hem opnieuw zodra het eigen lettertype binnen is. De inhoud is meteen leesbaar, maar je krijgt een zichtbare verschuiving wanneer de breedte van de tekens verandert.

FOUT verdient meestal de voorkeur boven FOIT: de gebruiker begint te lezen zonder te wachten. Het echte doel is om die overgang ontworpen en sprongvrij te maken.

Gedrag sturen met font-display

De descriptor font-display bepaalt hoe de browser tekst tekent terwijl het lettertype downloadt, en hij staat binnen de @font-face-regel:

@font-face {
  font-family: "Inter";
  src: url("/fonts/inter-var.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

Wat de waarden in de praktijk betekenen:

• swap: na een zeer korte blokkeerperiode verschijnt het terugvallettertype meteen en wisselt zodra het eigen lettertype binnen is. Klassieke FOUT — tekst is nooit onzichtbaar.
• block: de tekst wacht een korte periode onzichtbaar (ongeveer 3 s) en valt dan terug. Hoog FOIT-risico.
• fallback: zeer korte blokkering plus een kort wisselvenster. Komt het lettertype laat, dan blijft het op de terugval; een goede balans voor logo's en merktypografie.
• optional: de browser beslist zelf of hij het lettertype überhaupt gebruikt, op basis van de verbindingssnelheid. Het minimaliseert layoutverschuiving (CLS) en is ideaal voor bodytekst.

Voor de meeste contentsites zijn swap of optional de veiligste keuzes.

Kritieke lettertypen vooraan zetten met preload

De browser ontdekt een lettertype pas nadat hij de CSS heeft gedownload en een element heeft gevonden dat het gebruikt, wat het starten vertraagt. Met <link rel="preload"> kun je het downloaden van je meest kritieke lettertype vroeg in gang zetten:

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

Twee details zijn belangrijk. Het attribuut crossorigin is verplicht voor lettertypen (zelfs als je vanaf dezelfde origin serveert), anders downloadt de browser het lettertype twee keer. Ten tweede: preload alleen de één of twee lettertypen die echt boven de vouw worden gebruikt — elk gewicht preloaden verspilt bandbreedte en vertraagt andere bronnen.

Bestanden verkleinen met WOFF2 en subsetting

De formaatkeuze is een van de grootste winsten. WOFF2 wordt vandaag door elke moderne browser ondersteund en comprimeert ongeveer 30% beter dan WOFF. Je hoeft geen oude TTF/OTF of WOFF meer te serveren — WOFF2 alleen volstaat.

De tweede grote winst is subsetting: alleen de tekens behouden die je echt nodig hebt. Een volledig lettertype kan duizenden glyphs bevatten, en een site met alleen Latijns schrift tekent de meeste daarvan nooit. Met unicode-range vertel je de browser welk bereik in welk bestand zit:

@font-face {
  font-family: "Inter";
  src: url("/fonts/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153;
}

Zo downloadt de browser het bestand nooit als er geen teken uit dat bereik op de pagina voorkomt. Je kunt subsets automatisch genereren met glyphhanger of pyftsubset van fonttools:

pyftsubset inter.ttf \
  --unicodes="U+0000-00FF,U+0131,U+0152-0153" \
  --flavor=woff2 \
  --output-file=inter-latin.woff2

Layoutverschuiving (CLS) voorkomen

Het irritantste aan FOUT is de sprong doordat het terugvallettertype en het eigen lettertype verschillende breedtes hebben. Moderne CSS lost dit grotendeels op. Met size-adjust, ascent-override en descent-override kun je een terugvallettertype dicht bij de metrieken van je eigen lettertype brengen:

@font-face {
  font-family: "Inter-fallback";
  src: local("Arial");
  size-adjust: 107%;
  ascent-override: 90%;
  descent-override: 22%;
}

Als je dan font-family: "Inter", "Inter-fallback", sans-serif; schrijft, is er bijna geen verschuiving wanneer het eigen lettertype binnenkomt. In plaats van deze metrieken met de hand te berekenen, kunnen tools als Fontaine ze voor je genereren.

Checklist

• Serveer alleen WOFF2; laat oude formaten vallen.
• Laad alleen de gewichten en stijlen die je echt gebruikt, gooi de rest weg.
• Subset Latijnse tekst en splits hem met unicode-range.
• Preload de één of twee lettertypen boven de vouw (vergeet crossorigin niet).
• Kies swap of optional voor bodytekst.
• Lijn terugvalmetrieken uit met size-adjust om CLS naar nul te brengen.

Veelgestelde vragen

Moet ik font-display: swap of optional gebruiken?

Als de tekst meteen kunnen lezen de prioriteit is, gebruik swap; je eigen lettertype verschijnt zeker. Als layoutstabiliteit en de CLS-score belangrijker zijn, is optional veiliger, omdat de browser het lettertype op trage verbindingen misschien nooit wisselt. Voor de meeste bodytekst is optional voor paragrafen en swap voor koppen een goede combinatie.

Is Google Fonts of zelf hosten sneller?

Zelf hosten op je eigen domein is tegenwoordig doorgaans sneller. Browsers delen de cache van derden niet meer tussen sites, dus het oude voordeel van Google Fonts is verdwenen; verbinden met een extra domein voegt ook DNS- en TLS-latentie toe. De WOFF2-bestanden downloaden en ze met preload vanaf je eigen server serveren is zowel sneller als schoner voor de privacy.

Schaden variabele lettertypen de prestaties?

Meestal het tegenovergestelde. Eén variabel lettertypebestand vervangt meerdere gewichten die je anders apart zou downloaden; gebruik je drie of vier gewichten, dan daalt de totale grootte vaak. Alleen als je één enkel gewicht en stijl gebruikt, kan een statische subset kleiner zijn.

Vertragen je lettertypen de pagina of zie je tekst springen? Laten we de laadprestaties en typografie van je site samen onder handen nemen. Neem contact met me op.