Using Font Face Observer
Font Face Observer let’s you add a CSS class on an element based on whether or not the font was loaded. This is useful when you want to avoid FOUT (Flash of Unstyled Text)
.wf-inactive body {
font-family: helvetica, arial, sans-serif;
/*
Add other styles to minimize text reflow (avoid jumpiness) here..
font-size, line-height, letter-spacing
*/
}
body {
font-family: "Graphik-Regular", helvetica, arial, sans-serif;
}
import FontFaceObserver from 'fontfaceobserver'
document.body.classList.add('wf-inactive')
// Fontface Observer
const GraphikRegular = new FontFaceObserver('Graphik-Regular'),
GraphikMedium = new FontFaceObserver('Graphik-Medium'),
GraphikSemibold = new FontFaceObserver('Graphik-Semibold')
Promise.all ([
GraphikRegular.load(),
GraphikMedium.load(),
GraphikSemibold.load()
])
.then (() => {
document.body.classList.remove('wf-inactive')
document.body.classList.add('wf-active')
})
.catch (() => {
console.info(`web font is NOT loaded`)
});
// serve from cache (sessions storage)
wf-active
andwf-inactive
are common practice names for indicating whether a web font was laoded or not. Typekit and fonts.com use it. You can just as well usefont-loaded
or something else if you want, but keeping it thewf-
way keeps it consistent whether you’re using your own fonts or a webfont service.- default timeout for font laoding is 3 seconds. You can change it