Font-display: Bepaal hoe tekst zich gedraagt tijdens het laden

Het is eigenlijk een soort “plan B”: het vertelt de browser wat te doen terwijl je font nog aan het laden is. Moet hij tijdelijk een fallback-font tonen, of juist even wachten?

Font-display werkt het beste wanneer het wordt gebruikt in combinatie met een doordachte laadstrategie, geoptimaliseerde fonts en een zorgvuldig gekozen fallback-font.

Welke font-display optie past bij welke tekst?

Font-display kan alleen worden gebruikt in de @font-face rule, en je hebt keuze uit vijf opties: auto, block, swap, fallback en optional.

@font-face {
  font-display: auto, block, swap, fallback of optional;
  font-family: "jouw-webfont";
  font-weight: 400;
  font-style: normal;
  src: url("/jouw-webfont.woff2");
}

body {
  font-family: "jouw-webfont", "fallback-font", systeem-font;
}

Heb jezelf geen fallback-font ingesteld dan zal de browser automatisch een systeem-font kiezen als fallback-font.

auto

De browser beslist zelf wanneer je font wordt geladen. Dit kan inconsistent zijn en is dus minder geschikt als je een stabiele gebruikerservaring wilt.

block

De tekst blijft tot 3 seconden onzichtbaar totdat je font geladen is. Minder geschikt voor langere teksten door de mogelijke wachttijd.

Alleen gebruiken als je font echt… echt essentieel is voor je design. Ik raad je af om dit te gebruiken omdat het een ramp is op langzamere netwerkverbindingen.

swap

Toont direct het fallback-font en schakelt automatisch naar je font zodra het geladen is. Ideaal voor tekst die direct zichtbaar moet zijn. Let op: dit kan wel een layout shift veroorzaken.

Dit wordt gezien als de meest gebruiksvriendelijke keuze voor lange stukken tekst en andere elementen die direct leesbaar moeten zijn.

fallback

Wacht kort om te zien of je font snel kan laden; zo niet, dan wordt het fallback-font getoond.

Handig voor situaties waar je zowel leesbaarheid als een goed design belangrijk vindt, maar geen garanties nodig hebt dat het lettertype altijd verschijnt.

optional

De browser bepaalt of je font überhaupt geladen wordt op basis van snelheid, netwerk, en apparaat.

Bij bijvoorbeeld een trage verbinding of beperkte mobiele data laat de browser je font gewoon achterwege en toont hij alleen het fallback-font.

Dit is perfect voor websites en apps die snel moeten laden en waarbij een font niet cruciaal is voor de gebruikservaring.

Factoren waar font-display: optional rekening mee houdt

1. Netwerkcondities
   • Snelheid van de internetverbinding: Browsers passen hun laadtijden en prioriteiten vaak aan op basis van de snelheid van de verbinding. Bij een trage verbinding (zoals 3G of langzamer) kan een browser sneller besluiten om een font over te slaan.
   • Netwerkverandering: Bij mobiele apparaten kan de netwerkverbinding wisselen tussen wifi en mobiele data, wat invloed kan hebben op de beschikbaarheid en laadtijd van het lettertype.
2. Apparaat en prestaties
   • Apparaatspecificaties: Op apparaten met weinig geheugen of trage processors kan de browser sneller besluiten om een font over te slaan om de prestaties te optimaliseren.
   • Batterijstatus: Sommige browsers nemen de batterijstatus in overweging en kunnen font-downloads vermijden als de batterij bijna leeg is om energie te besparen.
3. Cache-geheugen
   • Beschikbaarheid in cache: Als het fonts al eerder gedownload en in de cache opgeslagen is, kan het meteen worden geladen zonder extra wachttijd. In dit geval is optional minder van belang, omdat het gewenste lettertype vrijwel direct beschikbaar is.
   • Browsercache-instellingen: Sommige browsers hebben strengere cache-instellingen die invloed kunnen hebben op het snel beschikbaar zijn van het lettertype, wat bepaalt of het alsnog wordt ingeladen.
4. Gebruikersinstellingen en voorkeuren
   • Data besparende modi: Veel browsers hebben een databesparingsmodus die het downloaden van zware inhoud zoals fonts beperkt. In dat geval zal de browser het lettertype waarschijnlijk overslaan en alleen het fallback-font gebruiken.
   • Gebruikerservaring en laadtijd-optimalisaties: Sommige browsers passen geavanceerde optimalisaties toe om een snellere laadtijd te bieden en kiezen er mogelijk voor om fonts over te slaan als de inhoud al goed leesbaar is.

Gebruik font-display: optional wanneer:

• Je rekening wilt houden met gebruikers op slechte internetverbindingen.
• Je dataverbruik wilt optimaliseren.
• Websites die ook op oude mobieltjes en langzame mobiele netwerken goed moeten werken.
• Websites en apps die altijd snel moeten laden en niet afhankelijk zijn van fonts.

Wat is nou de beste font-display optie?

Op snelle verbindingen is font-display: swap handig: de tekst verschijnt direct in een fallback-font, zodat de gebruiker meteen kan lezen, terwijl het gewenste font op de achtergrond laadt en snel omgewisseld wordt.

Maar bij langzame of instabiele verbindingen kan dit juist onhandig zijn. Dan kan de ‘oneindige wisselperiode’ optreden, waarbij het lang kan duren voordat het font omschakelt, wat voor een storende leeservaring zorgt.

Als je weet dat je gebruikers hebt die mogelijk geen stabiele verbinding hebben, is font-display: fallback misschien wel een betere optie. En pin jezelf niet vast aan één keuze; je kunt swap, fallback, en auto prima combineren.

Welke optie je ook kiest, zorg ervoor dat je fonts altijd geoptimaliseerd zijn en snel laden. Als je zomaar fonts van het web plukt en alleen font-display toevoegd, zal dit weinig tot geen effect hebben op je laadtijd en de CLS (Cumulative Layout Shift).

Fonts zijn één van de traagste onderdelen van een webpagina, dus optimaliseer ze tot je er bij neer valt.