Naar navigatie Naar hoofdinhoud

Wij gebruiken cookies voor de beste ervaring van de website. Meer informatie.

Ga naar het overzicht
Ga naar de homepagina Ga naar het overzicht

Wat wil je ons vragen?

Hoi, ik ben

en ik wil graag weten


Jullie kunnen me
op

De wereld van webdevelopment staat nooit stil en is continu in ontwikkeling. Dit uit zich in nieuwe denkwijzen zoals de BEM methodologie, ITCSS bestandsstructuur en nieuwe programmeertalen/frameworks zoals React en TypeScript. Soms betreft het ook kleine toevoegingen binnen een bestaande taal. Op het eerste gezicht lijken deze kleine specificaties niet belangrijk, echter hebben zij wel degelijk een grote impact op de toekomst van het web. In dit blogartikel ga ik dieper in op één van deze recent toegevoegde specificaties aan CSS; font-display. Daarnaast leg ik uit wat dit voor invloed heeft op het laden en tonen van webfonts.

Webfonts

Webfonts zijn tegenwoordig niet meer weg te denken binnen webontwikkeling. Het is een middel geworden om een website/webapplicatie te onderscheiden van andere websites, de identiteit van een merk beter uit te dragen en om uiteraard het geheel visueel aantrekkelijker te maken. Terwijl wij vroeger genoodzaakt waren om enkel systeemfonts te gebruiken (denk aan Arial, Georgia en Verdana) hebben wij nu de mogelijkheid om elk gewenst font toe te passen.

Er zit echter ook een keerzijde aan webfonts: in vergelijking tot systeemfonts zal het font eerst gedownload moeten worden. Dit neemt uiteraard tijd in beslag, maar kan ook fout gaan (denk bijvoorbeeld aan een externe dienst die offline is) waardoor het font helemaal niet binnengehaald kan worden. Vaak neemt men echter aan dat het font gewoon voorhanden is en wordt het in de styling veelvuldig toegekend.

Hoe voorziet een browser een stuk tekst van een lettertype dat nog niet beschikbaar is? Hedendaagse browsers passen hiervoor op het ogenblik één van de twee volgende implementaties toe: Flash of In­vis­i­ble Text (FOIT) en Flash of Un­styled Text (FOUT).

Flash of Invisible Text (FOIT)

Flash of Invisible Text is de meeste gebruikte implementatie en wordt toegepast door alle browsers met uitzondering van Internet Explorer en Edge. Het komt erop neer dat tekst met een webfont niet zichtbaar is tot het font gedownload is, of tot er een bepaalde tijd is verlopen. Deze duur verschilt per browser, en kan variëren van drie tot dertig seconden.

Denk nu eens terug aan -een door jouw recent bezochte website- terwijl je op een trager netwerk zat… Komt het je bekend voor dat de site wel voorzien was van de overige vormgeving, maar dat er nog geen tekst werd weergeven? De reden hiervoor is dus de FOIT implementatie voor het laden van de fonts. Nu kan ik mij zomaar voorstellen dat je denkt; “Wat maken die paar seconden nu uit?” Het antwoord hierop is: ”Conversieverlies en een hoger bounce percentage”.

Hoe langer het duurt voordat de tekst toont, hoe groter de kans dat mensen afhaken en de informatie elders gaan zoeken. Zo blijkt bijvoorbeeld uit onderzoek door Akamai, een leidinggevende partij in een veilig en snel internet, dat de helft van webgebruikers verwachten dat een website sneller laadt dan twee seconden. En dat het merendeel van deze mensen de website zou verlaten als het langer duurt dan drie seconden om te laden. Het is daarom belangrijk om de pagina zo snel mogelijk te laden of om het gevoel te geven dat de pagina snel laadt. En als door de FOIT de tekst al drie seconden lang (in het ergste geval) niet toont kunnen enkele bezoekers al afgehaakt zijn.

 

Flash of Unstyled Text (FOUT)

De tweede implementatie Flash of Un­styled Text houdt in dat een fallback font wordt gebruikt, dat met het daadwerkelijk webfont wordt omgewisseld zodra deze klaar is. Met deze implementatie is de tekst eerder leesbaar, dus eerder bruikbaar en voelt het bovendien gevoelsmatig ‘sneller geladen’ aan in vergelijking met de FOIT implementatie.

Beide implementaties zijn uiteraard niet ideaal te noemen omdat ze beide een ongewenste flash veroorzaken. Kortom het is kiezen voor de ‘lesser of two evils’ en dat is op het ogenblik de Flash of Un­styled Text implementatie. Je zult het niet vaak uit de mond van een webontwikkelaar horen, maar wat dit onderwerp betreft, heeft Microsoft met hun browsers de juiste implementatie gekozen.

Aangezien de afgelopen tijd steeds meer aandacht gekomen is voor het laden van webfonts, is men naar manieren gaan zoeken om in alle browsers de FOUT implementatie te kunnen afdwingen. Dit heeft geresulteerd in bijvoorbeeld de Javascript oplossing Font Face Observer. Tot op heden de beste en simpelste manier. Althans voor nu, want zoals eerder aangegeven zal de font-display specificatie in CSS deze rol over gaan nemen.

Font Face Observer

Aangezien font-display nog maar recent is toegevoegd in enkele browsers is het gebruik ervan nog niet aan te raden. Daarom gebruiken wij de komende tijd nog even Font Face Observer om er zeker van te zijn dat wij alle browsers voorzien van het door ons gewenste laadgedrag.

Wat het script doet is kijken of het font binnengehaald is, en het geeft vervolgens een signaal door. Door dit signaal af te vangen kunnen wij een vervolgactie uitvoeren, zoals bijvoorbeeld een class toe te voegen op het html element. Zoals hieronder in te zien is:

Als fallback krijgt het body element het systeemfont Arial toegekend, met enkele stylewijzigingen (zie html:not(.apercu–loaded) body) om het verschil tussen de beide fonts zo klein mogelijk te maken. Zodra het font gedownload is (zie Promise.then()) wordt de class apercu–loaded toegevoegd op het HTML element. Dit zorgt er op zijn beurt voor dat het webfont toegepast wordt en dat de FOUT plaatsvindt.

De hierboven beschreven standaard implementatie betekent echter wel dat deze zelf toegepaste FOUT bij elk opvolgend paginabezoek wordt uitgevoerd, en dat is uiteraard niet gewenst. Er kan aangenomen worden dat het font bij het eerste bezoek in de browsercache is opgeslagen en dus haast direct beschikbaar is. Om hiervan gebruikt te maken en niet wederom de FOUT te forceren plaatsen wij een (functionele) cookie die gedurende de sessie bewaard blijft. Als deze cookie aanwezig is wordt het Javascript deel van hierboven overgeslagen en zetten wij direct de classes op het HTML element. Dit zorgt ervoor dat de Flash of Un­styled Text maar één keer plaatsvind.

Met een simpel en klein stuk eigen code en de Font Face Observer worden webfonts nu altijd en overal via de FOUT implementatie geladen. Zie bijvoorbeeld Rotterdam Festivals om het in actie te zien; de eerste keer zal de Flash of Unstyled Text plaatsvinden terwijl bij opeenvolgende paginabezoeken het font direct vanuit de cache wordt geladen.

Font Display

Echter het kan nog simpeler; met behulp van de font-display specificatie in CSS. Op het moment van schrijven is deze net toegevoegd in de laatste versies van Chrome en Opera. Het zal waarschijnlijk niet lang meer duren voordat het ook in Firefox kan worden gebruikt. Zodra het goede ondersteuning geniet (en/of een polyfill heeft voor oudere browsers) kunnen wij de gehele Font Face Observer-implementatie vervangen door één regel CSS, namelijk font-display: auto|block|swap|fallback|optional;.

Dit wordt aangegeven binnen de @font-face declaratie, zoals hieronder weergegeven:

De specificatie heeft een vijftal beschikbare waarden, die allemaal andere tijdslimieten en gedrag tonen qua wisseling van de fonts. Zo zal er bij block|swap gezorgd worden dat het font sowieso wordt toegepast. Hierbij maakt het niet uit hoelang het downloaden ook duurt. Daarentegen kan er bij de optie fallback|optional na een bepaalde tijd besloten worden door de browser, om het downloaden stop te zetten en de tekst in de fallback font te blijven tonen. Lees meer over de verschillen tussen de opties in het artikel Controlling Font Performance with font-display op Google Developers.

Er zit echter nog wel een nadeel aan deze specificatie ten opzichte van Font Face Observer en dat zijn webfonts die ingeladen worden via een externe bron, zoals bijvoorbeeld Typekit of Google Fonts. Deze sturen hun eigen @font-face declaraties mee die niet door de ontwikkelaar aan te passen zijn. De toekomst zal uitwijzen hoe dit soort diensten om zullen gaan met de specificatie.

Conclusie

Met de font-display specificatie zijn wij weer een stap dichter bij een snellere ervaring op het web. Een web zonder onzichtbare tekst. Totdat het echter zover is zullen wij voor nu de Font Face Observer blijven inzetten om dit voor elkaar te krijgen.

Volgend blogartikel Rotterdam Festivals website genomineerd voor Awwwards 2017!
Rotterdam Festivals website genomineerd voor Awwwards 2017!

Wij zijn Hoppinger

Met een team van 75 specialisten vertalen we complexe en uitdagende vraagstukken naar web en native oplossingen die onze opdrachtgevers succesvoller en het leven van hun publiek gemakkelijker maken. Zo maken we als strategisch partner digitale ambities waar.

Meer over ons