Using Font Face Observer

January 19, 2019

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)

code

.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;
}

code

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`);
  });

code

// 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 fonts.com 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

Using Font Face Observer

Links