CSS attribuut font-display header image

CSS attribuut font-display

maandag 30 september 2019 ·Leestijd: 3 minuten
contacteer auteur:

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:

  1. 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.
  2. 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
  3. Block: Gedraagt zich als FOIT maar de tijd dat het font onzichtbaar blijft en er dus geen fallback font wordt ingeladen wordt infinitief verlengd.
  4. 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.
  5. 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:

  1. https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display
  2. https://developers.google.com/web/updates/2016/02/font-display

Andere blogartikelen

B2B E-commerce… Wakker worden!
Geschreven door
op dinsdag 28 juni 2022
Veel B2B-bedrijven in blijven hangen in; nauwelijks vindbare, verouderde B2B e-commerce websites met minimale conversiemogelijkheden en een betreurenswaardige gebruikerservaring. Zonde!
B2B Leadgeneratie: Alles wat je altijd al wilde weten!
Geschreven door
op maandag 27 juni 2022
B2B online leadgeneratie is het proces van het identificeren van de ideale klanten voor uw product of dienst, en hen vervolgens overhalen tot aankoop. Het is een essentiële activiteit voor B2B sales- en marketingteams.
Wat maakt een B2B webshop succesvol?
Geschreven door
op zondag 26 juni 2022
De opmars van de B2B webshop neemt toe. Regelmatig krijgen wij de vraag of er een groot verschil is tussen een consumentgerichte webshop en een puur B2B gedreven webshop. In deze blog leggen wij u uit hoe een B2B webshop succesvol kan zijn en worden.
Open Nieuwsbrief Inschrijving Footer

E-book

Zo wordt uw website een lead generator 
In 3 stappen uw website van visitekaartje naar salesfunnel

Download het E-book â€º