Streaming live at 10am (PST)

Advanced Typekit embed code for FOUT fix

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.

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.

This topic was automatically closed after 60 days. New replies are no longer allowed.

See Eliminate Flash of Unstyled Text/Content (FOUC) e.g.: font loading