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'


// Fontface Observer
const GraphikRegular = new FontFaceObserver('Graphik-Regular'),
      GraphikMedium = new FontFaceObserver('Graphik-Medium'),
      GraphikSemibold = new FontFaceObserver('Graphik-Semibold')

Promise.all ([
.then (() => {
.catch (() => {`web font is NOT loaded`)
// serve from cache (sessions storage)
  • wf-active and wf-inactive are common practice names for indicating whether a web font was laoded or not. Typekit and use it. You can just as well use font-loaded or something else if you want, but keeping it the wf- 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