Advanced Typekit embed code for FOUT fix

[joeldrapper]

Is there any way for me to use the Typekit advanced embed code? Or is there another way to add a class to the root html element once the web fonts have loaded?

I usually use this method to eliminate the flash of un-styled text (FOUT). It replicates the would-be effect of font-display: block; from this proposed spec.

[joeldrapper]

Update: I discovered that Modernizr is adding a class when the web fonts are loaded.

Here’s the code I used to successfully replicate font-display: block and eliminate FOUT in most situations.

/* Future syntax */
:root { font-display: block; }

/* Fade in animation */
@keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

/* Only run fallback if future syntax isn’t supported */
@supports not (font-display: block) {
  
  /* Check that the browser definitely supports animation-fill-mode: forwards */
  @supports (animation-fill-mode: forwards) {
    /* If it does, hide the html element by default */
    html { opacity: 0; }
  }
  
  html {
    /* Run the fade in animation for the duration of 0.1 seconds
       after a 3 second delay and stop in the forward most position
       so the page remains visible. */
    animation: fadeIn 0.1s ease 3s 1 normal forwards;
  }

  .wf-freighttextpro-n4-active {
    /* If the web font loads before the 3 seconds is up, run the
       animation immediately */
    animation-delay: 0.01s;
  }
  
}

You can see this working on our website at https://indee.io.