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.
// Roboto
@font-face {
font-family: ‘Roboto’;
src: url('/fonts/roboto/roboto-regular-webfont.woff2') format('woff2'),
url('/fonts/roboto/roboto-regular-webfont.woff')format('woff');
font-weight: 400;
font-style: normal;
}
// Roboto bold
@font-face {
font-family: ‘Roboto bold’;
src: url('/fonts/roboto/roboto-bold-webfont.woff2') format('woff2'),
url('/fonts/roboto/roboto-bold-webfont.woff') format('woff');
font-weight: 700;
font-style: normal;
}
// Roboto italic
@font-face {
font-family: ‘Roboto italic’;
src: url('/fonts/roboto/roboto-italic-webfont.woff2') format('woff2'),
url(‘/fonts/roboto/roboto-italic-webfont.woff') format('woff');
font-weight: 400;
font-style: italic;
}
body {
font-family: sans-serif;
}
.fonts-loaded body {
font-family: ‘Roboto’, sans-serif;
font-weight: 400;
font-style: normal;
}
.fonts-loaded strong {
font-family: ‘Roboto bold’, sans-serif;
font-weight: 700;
}
.fonts-loaded em {
font-family: ‘Roboto italic’, sans-serif;
font-style: italic;
}FOUT-methode
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.
// Variabelen van de verschillende fonts
var fontRoboto = new FontFaceObserver('Roboto');
var fontRobotoBold = new FontFaceObserver('Roboto bold', { weight: 700 });
var fontRobotoItalic = new FontFaceObserver('Roboto italic', { style: 'italic' });
// Wanneer Roboto, Roboto bold en Roboto italic ingeladen zijn dan komt er een extra class op de html tag bij
Promise.all([fontRoboto.load(), fontRobotoBold.load(), fontRobotoItalic.load()]).then(function () {
document.documentElement.className += " fonts-loaded";
});Volgens de FOUT-methode, ziet de technische uitwerking er in Javascript er zo uit.
// Roboto
@font-face {
font-family: ‘Roboto’;
src: url('/fonts/roboto/roboto-regular-webfont.woff2') format('woff2'),
url('/fonts/roboto/roboto-regular-webfont.woff')format('woff');
font-weight: 400;
font-style: normal;
}
// Roboto bold
@font-face {
font-family: ‘Roboto bold’;
src: url('/fonts/roboto/roboto-bold-webfont.woff2') format('woff2'),
url('/fonts/roboto/roboto-bold-webfont.woff') format('woff');
font-weight: 700;
font-style: normal;
}
// Roboto italic
@font-face {
font-family: ‘Roboto italic’;
src: url('/fonts/roboto/roboto-italic-webfont.woff2') format('woff2'),
url(‘/fonts/roboto/roboto-italic-webfont.woff') format('woff');
font-weight: 400;
font-style: italic;
}
body {
font-family: sans-serif;
}
.font-basic-roboto body {
font-family: ‘Roboto’, sans-serif;
font-weight: 400;
font-style: normal;
}
.font-full-roboto strong {
font-family: ‘Roboto bold’, sans-serif;
font-weight: 700;
}
.font-full-roboto em {
font-family: ‘Roboto italic’, sans-serif;
font-style: italic;
}FOFT-methode
Volgens de FOFT-methode, ziet de technische uitwerking er in CSS er zo uit.
// Variabel van de algemene font
var fontRoboto = new FontFaceObserver('Roboto);
// Wanneer Roboto ingeladen is dan komt er een extra class op de html tag bij ook mag er dan pas gekeken worden om de sub fonts in te laden
Promise.all([fontRoboto.load()]).then(function () {
document.documentElement.className += " font-basic-roboto";
// Variabelen van sub fonts (in dit geval Roboto bold en Roboto italic)
var fontRobotoBold = new FontFaceObserver('Roboto bold', { weight: 700 });
var fontRobotoItalic = new FontFaceObserver('Roboto italic', { style: 'italic' });
// Wanneer Roboto bold en Roboto italic ingeladen zijn dan komt er een extra class op de html tag bij
Promise.all([fontRobotoBold.load(), fontRobotoItalic.load()]).then(function () {
document.documentElement.className += " font-full-roboto";
});
});Volgens de FOFT-methode, ziet de technische uitwerking er in Javascript er zo uit.