CSS attribuut font-display

Gepubliceerd op 30 september 2019 Leestijd : 3 minuten

De snelheid van je website is belangrijk. Niet alleen omdat Google je website hierdoor hoger rankt maar ook omdat het gebruiksvriendelijker is voor de bezoekers. Als een website traag laadt, ben je eerder geneigd om weg te klikken en een andere website te bezoeken. De snelheid van je website is afhankelijk van een scala aan elementen. Één daarvan is de tijd die het kost om fonts die de website gebruikt, in te laden. Nu heb je hier enig zeggenschap over, namelijk met het css attribuut font-display.

Laten we eerst kijken hoe browsers fonts inladen. Als een browser een font opvraagt bij een web server is de tekst die gebruik maakt van dit font niet zichtbaar totdat het font is ingeladen. Dit wordt Flash of invisible test of FOIT genoemd. Zo voorkom je dat er een systeem font wordt getoond wat even later wordt verruild voor het ingeladen fond. Het eerst inladen van een systeem font en dit later verruilen met het ingeladen font wordt Flash of unstyled tekst ofwel FOUT genoemd.

FOIT kan nadelige gevolgen hebben voor bezoekers met een langzame internetverbinding. Bij FOUT kan het wel 3 seconden duren voordat er een systeem- of fallback-font wordt ingeladen. In sommige browsers kan dit nog wel langer duren. Dit kan opgevangen worden door bijvoorbeeld met Javascript te kijken of er een font is ingeladen, maar dit is omslachtig. Hier komt het font-display attribuut van pas.

Met font-display heb je controle over hoe een font ingeladen wordt op je website. Het vertelt de browser hoe een font moet worden ingeladen en moet worden vertoond op de website. Dit kun je in de CSS regelen en hier heb je geen Javascript meer voor nodig. Het font-display attribuut wordt gebruikt binnen @font-face en heeft verschillende mogelijkheden:

Auto: dit is de default waarde. Hier handelt de browser het inladen van het font af en maakt gebruik van FOIT of FOUT, afhankelijk van de browser die gebruikt wordt.
Swap: het fallback font dat als eerste beschikbaar is, wordt direct ingeladen en er wordt niet eerst gewacht om deze in te laden. Als het font is ingeladen die daadwerkelijk gebruikt wordt, wordt het fallback font gewisseld (swap) voor het ingeladen font. Dit is handig als je wilt dat tekst direct zichtbaar is en niet afhankelijk is van het inladen van een font
Block: Gedraagt zich als FOIT maar de tijd dat het font onzichtbaar blijft en er dus geen fallback font wordt ingeladen wordt infinitief verlengd.
Fallback: Dit ligt tussen swap en block in. De tekst zal eerst een korte tijd onzichtbaar zijn voordat ongestylde tekst zichtbaar wordt als het font nog niet is ingeladen. Als het font is ingeladen wordt de tekst gestyled. Dit is een goede optie als FOUT niet gewild is en beschikbaarheid belangrijk is.
Optioneel: Lijkt op fallback, tekst is eerst onzichtbaar voordat een fallback font wordt ingeladen als het font nog niet is ingeladen. Het verschil met fallback zit in het feit dat de browser zelf kan besluiten welk font als fallback font wordt ingeladen, gebaseerd op de internetconnectie van de gebruiker. Mocht een gebruiker een erg trage internetconnectie hebben dan mag je ervan uitgaan dat trage custom fonts helemaal niet worden ingeladen als je deze optie gebruikt.

Let op, niet alle browsers ondersteunen dit attribuut, welke browsers dit wel en niet doen kun je hier vinden.

Meer lezen over font-display: