FOUT

Last updated: 2020-05-01

aka Flash of Unstyled Text

This technique uses FontFaceObserver.

First load the fontfaceobserver.js file in the document head. At the end of the script, setup the fonts you want to include in the technique.

const fontA = new FontFaceObserver('DINCondensed-Bold')
const fontB = new FontFaceObserver('Roboto-Regular')

Promise.all([fontA.load(), fontB.load()]).then(function () {
  document.documentElement.className += ' fonts-loaded'
  // Optimization for Repeat Views
  sessionStorage.foutFontsLoaded = true
})

In the stylesheet, use a base font that is similar to the non-web fonts for the initial load. Then use the .fonts-loaded class to define the custom fonts.

.fonts-loaded {
  font-family: ; /* custom font stack here */
}