Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community!

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

General Discussion

Natasha McDiarmid
Natasha McDiarmid
11,400 Points
Posted by Natasha McDiarmid
Natasha McDiarmid
11,400 Points

How Can I Reduce FOUT?

I've created a site using fronts from TypeKit.

What can I do to help eliminate the flash of unstyled text before the site loads? It looks really bad!

http://www.jessicalittlephotography.com/

Joshua Briley
Joshua Briley
Courses Plus Student 24,645 Points
Joshua Briley
Joshua Briley
Courses Plus Student 24,645 Points

Hi Natasha, I was running into similar issues with Typekit. If you go the async route, there are some options.

 <script>
    // Load typekit font
    // add .wf-loading class to styles to account for FOUC
    (function(d) {
      var config = {
        kitId: 'YOUR_KIT_ID',
        scriptTimeout: 3000,
        async: true
      },
      h=d.documentElement,t=setTimeout(function(){h.className=h.className.replace(/\bwf-loading\b/g,"")+" wf-inactive";},config.scriptTimeout),tk=d.createElement("script"),f=false,s=d.getElementsByTagName("script")[0],a;h.className+=" wf-loading";tk.src='//use.typekit.net/'+config.kitId+'.js';tk.async=true;tk.onload=tk.onreadystatechange=function(){a=this.readyState;if(f||a&&a!="complete"&&a!="loaded")return;f=true;clearTimeout(t);try{Typekit.load(config)}catch(e){}};s.parentNode.insertBefore(tk,s)
    })(document);
  </script>

This script adds a couple of classes to your html element. .wf-loading is added to your html element while the fonts are loading, and .wf-active is added when they are done loading. I'm using those to sort of hack the UI a little. I created an animation that sets the font's opacity to 0% while they're loading, and the transition to 100% when the fonts have loaded. Here's what it looks like: http://www.somecallmejosh.com

I'm not 100% sold on the above idea. I get Adobe's reason for suggesting that FOUC/FOUT is cool (episode 172 of www.shoptalkshow.com). But, that doesn't make me and other users like it any more The other method offered by Typekit eliminates the FOUC, but it becomes a blocking script:

<script src="//use.typekit.net/YOUR_KIT_ID.js"></script>
<script>try{Typekit.load({ async: true });}catch(e){}</script>

2 Answers

Alexander Smith
Alexander Smith
2,769 Points
Alexander Smith
Alexander Smith
2,769 Points

Try moving all your javascript to the bottom of the page. This should make it so the CSS load first which will help. You could also try hosting the font locally (if you aren't already). Then lastly try to have as few files as possible (one CSS, one JS(maybe two if you used a framework)) and make sure they're minified.

Justin DiRose
Justin DiRose
2,676 Points
Justin DiRose
Justin DiRose
2,676 Points

I heard Tim Brown recently state on the Shop Talk Show to pick fonts in your fallback font stack that are close to the web font you're loading. That way it won't be as jarring when the TypeKit font loads.

Joshua Briley
Joshua Briley
Courses Plus Student 24,645 Points
Joshua Briley
Joshua Briley
Courses Plus Student 24,645 Points

Hi @justindirose, there's another discussion on Shop Talk Show, episode 178 about this discussion. It starts at 38:00.