Wat met de laadtijden van fonts?

Wanneer we een font meegeven in de CSS van een website, is er meestal een fallback font aanwezig.

Een voorbeeldje: font-family: 'Roboto', sans-serif;

Tijdens het laden van de website, zal je eerst een fallback font (in het voorbeeld: sans-serif) zien. In de meeste gevallen gaat het om een standaard font, die aanwezig is op de computer van de gebruiker. Vanaf het moment dat de custom font (in het voorbeeld: Roboto) is ingeladen, zal deze pas zichtbaar worden.

Eenmaal de custom font Roboto actief is, kan er wel een visuele flash getoond worden of kunnen er blokken verschuiven. Dit fenomeen heet FOUT (Flash Of Unstyled Text). We hebben geprobeerd om dit fenomeen eens tegen te gaan, door de tekst onzichtbaar te laten, tot wanneer het custom font was ingeladen. Als reactie hierop pasten de browsers zich automatisch aan, waardoor er een check uitgevoerd werd om te kijken of het font een custom font was. Met gevolg dat de browser wachtte om de tekst te tonen tot de custom font ingeladen was, waardoor er dus voor x-aantal tijd geen tekst te zien was op het scherm. Dit heet FOIT (Flash Of Invisible Text). 

Nu bestaat er nog een betere oplossing. Deze heet FOFT (Flash Of Faux Text). Hierbij wordt eerst de roman variant van het custom font ingeladen, waardoor de tekst deze al aanneemt. Na dit zullen de varianten van het custom font ingeladen worden, zoals de bold/italic/ ... Conclusie is dat het custom font veel sneller ingeladen wordt en dat hierna dan de bold/italic/... versie ingeladen wordt. Je ziet de tekst dus nog heel miniem verspringen.

Door gebruik te maken van de font face observer (https://fontfaceobserver.com/), kan je kijken wanneer er een font ingeladen werd.

Bijvoorbeeld: we wensen het font Roboto, Roboto bold en Roboto italic in te laden volgens de FOUT-methode. Dan ziet de technische uitwerking er in CSS zo uit. 

Volgens de FOUT-methode, ziet de technische uitwerking er in Javascript er zo uit.

Volgens de FOFT-methode, ziet de technische uitwerking er in CSS er zo uit. 

Volgens de FOFT-methode, ziet de technische uitwerking er in Javascript er zo uit.