Webfont

Een webfont is een lettertype dat de browser pas van de server haalt als de pagina wordt geladen. Zo kun je een lettertype gebruiken dat niet op het apparaat van de bezoeker staat, met een eigen uitstraling en merkidentiteit.

Je komt webfonts vaak tegen in thema's en in pagina's van websitebouwers. Het downloaden kost tijd. Zolang het lettertype niet binnen is, moet de browser iets anders tonen of wachten met de tekst. Hoe dat uitpakt, hangt af van de instellingen van het lettertype en van het aantal bestanden dat je laadt.

Een browser kan tekst op twee manieren tonen terwijl het lettertype nog laadt. De ene aanpak houdt de tekst even onzichtbaar. De andere toont eerst een standaardlettertype en wisselt dat later voor het webfont. In beide gevallen ziet de bezoeker even wachten of een wissel.

Die wissel kan elementen laten verspringen. Heeft het standaardlettertype een andere breedte of hoogte, dan schuift de tekst bij het wisselen op. Dat soort verschuiving meet je als CLS.

Je kunt de vertraging op verschillende manieren beperken:

• font-display: met de waarde swap toon je direct tekst in een standaardlettertype en wissel je later naar het webfont.
• Minder varianten: elke dikte en schuinstand is een apart bestand. Gebruik alleen wat je nodig hebt.
• Subsetten: laat alleen de tekens laden die je site gebruikt.
• Lokaal hosten: zet het lettertype op je eigen server, zodat de browser geen verbinding met een andere server hoeft te openen.

Lokaal hosten heeft ook een nadeel: je moet de bestanden zelf bijhouden. Wil je het lettertype eerder laten ophalen, dan kan preload en preconnect helpen. Ook de volgorde waarin de browser bestanden laadt speelt mee, zie render-blocking resources.