Prevent FOUT

fout.md

Nobody Likes FOUT

• Use: Webfontloader https://github.com/typekit/webfontloader
• Figthing the FOUT: https://www.paulirish.com/2009/fighting-the-font-face-fout/

It's best to inline all this stuff in the header. Then it will be loaded at first.

foutScript.html

<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js"></script>
<script>
  WebFont.load({ google: { families: ['Fira Sans:400,700,italic,bolditalic'] } });
  WebFontConfig = {
    // other options and settings
    active: function() {
      sessionStorage.fonts = true;
    }
  }
</script>
<script>
  (function() {
    if (sessionStorage.fonts) {
      console.log("Fonts installed.");
      document.documentElement.classList.add('wf-active');
    } else {
      console.log("No fonts installed.");
    }
  })();
</script>

foutStyles.html

<style>
  body {
    font-family: 'Fira Sans', serif;
    font-size: 62.5%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-weight: 400;
    font-style: normal;
  }
  .wf-loading p,
  .wf-loading li,
  .wf-loading h1,
  .wf-loading h2,
  .wf-loading h3,
  .wf-loading h4,
  .wf-loading h5,
  .wf-loading h6,
  .wf-loading input,
  .wf-loading pbutton,
  .wf-loading a {
    opacity: 0;
  }
  .wf-active p,
  .wf-active li,
  .wf-active h1,
  .wf-active h2,
  .wf-active h3,
  .wf-active h4,
  .wf-active h5,
  .wf-active h6,
  .wf-active input,
  .wf-active pbutton,
  .wf-active a {
    transition: opacity 0.3s linear;
    -webkit-transition: opacity 0.3s linear;
    -moz-transition: opacity 0.3s linear;
    opacity: 1;
  }

</style>