October 16, 2012

Fade In TypeKit Fonts

When using TypeKit font’s you may see some FOUT (flash of unstyled text), this can ruin the look of your pages. You can hide the TypeKit font and make the page have a nice fade in effect in modern browsers using the following:

.wf-loading {
  opacity: 0;
  visibility: hidden;
}
 
.ie.wf-loading {
  visibility: hidden;
}
 
.ie.wf-active {
  visibility: visible;
}
 
.wf-active {
  visibility: visible;
  opacity: 1;
  -webkit-transition: opacity 0.64s ease-in-out;
     -moz-transition: opacity 0.64s ease-in-out;
          transition: opacity 0.64s ease-in-out;
}

Leave a Reply

Your email address will not be published. Required fields are marked *

css.php