Progressively loading fonts with font events

font-events.js

// Eliminate FOIT (Flash of Invisible Text) caused by web fonts loading slowly
// Using font events with Font Face Observer
var roboto = new FontFaceObserver('Roboto', {
  weight: 400
});
observer.check().then(function () {
  document.getElement.className += 'fonts-loaded';
});

// Load multiple fonts using a Promise
var roboto400 = new FontFaceObserver('Roboto', {
  weight: 400
});
var roboto500 = new FontFaceObserver('Roboto', {
  weight: 500
});
var roboto700 = new FontFaceObserver('Roboto', {
  weight: 700
});

Promise.all([
  roboto400.check(),
  roboto500.check(),
  roboto700.check()
]).then(function () {
  document.documentElement.className += ' fonts-loaded';
}, function () {
  // Use the catch to give the html element a unique class name to handle the timeout state
  document.documentElement.className += ' fonts-unavailable';
});

global.css

/* Eliminate FOUT (Flash of Unstyled Text) caused by web fonts loading slowly */
@font-face {
  font-family: "RobotoLocal";
  font-style: normal;
  font-weight: 400;
  src: local("Roboto"),
    local("Roboto-Regular");
}
body {
  font-family: "RobotoLocal", Helvetica, Arial, sans-serif; /* fallback font: Helvetica */
}
.fonts-loaded body {
  font-family: "Roboto", Helvetica, Arial, sans-serif;
}