Menu
26/10 2010

FOUT – What’s that all about?

What is FOUT?

Flash Of Unstyled Text is a phenomenon that occurs in some browsers when using the @font-face rule in css. The @font-face rule as I'm sure most professional Front End Designers already know, is one of the most hotly debated design tools that make using beautiful and more importantly accessible and selectable Typography, across browsers, even IE6, a reality! That is why this topic is so important to me.

Surprisingly, the two browsers you would expect to have got their act together on this issue are the ones where the FOUT issue is most evident - I shall name no names. You know who you are.

Firefox and Chrome, shame on you, you should know better

It occurs when you load the page. While the font is being loaded, a default system font is put in its place. Eventually, when the font has fully loaded, the @font-face rule kicks in, which is great, however, the sudden change in font makes for a juddery, ugly user experience causing a user to do a 'double take' to adjust their bearings on the content. If you aren't using either of these browsers, have a look at the video below to see the differences in action using a hard refresh (Ctrl/F5) in Firefox 3.6.

Why do I care?

Truth is, if you're asking this question, you aren't interested in the users experience and building Web sites in the best possible way. As you were.

If you don't recognise that the issue exists, I'm sure if you've used @font-face enough on your site, your client will point it out for you. If you are one of these people, you are probably one of those lazy so-and-so's who is damaging the Web by not being passionate enough about finding the best solution from every angle.

For the professionals out there, you should have an idea why already. Your journey so far has somehow led you to click on a link to this article so you must be intrugued by the concept of FOUT in some way. When a user sees this happen, their reaction is never a good one. They expect some kind of lag as the page loads, it happens on every page on the web to some extent, however, content loading then changing is very distracting and if it can be tackled, it should be. Our job as a Front End Designers is to make the experience as good as it can possibly be whilst balancing Accessibility, Web Standards, design and many other concerns. Thats why we're the most important and skilled guys and girls working in the Industry. Any professional should be thinking the same way, its for the good of the future of the Web (Thank you and goodnight).

So how do I fix it?

I'm glad you asked. While Mozilla and google are working on fixing this bug in their browsers, there are a couple of ways to tackle it.

I have investigated a few ways recently. Some involve hiding the entire page with javascript until everything has loaded, including the fonts. This is a feasable and rational way to do it although this can create another issue with page load times. If nothing is loading on the page, google can penalise you and no one likes a site that is too slow.

The best way is to use Google's Webfont API. It works by loading up the font via javascript. Whilst it is loading the font it will hide any elements, which you need to specify via css, until the font is loaded, then show it. It means that the font will not appear at all until fully loaded, better than flashing between fonts IMHO.

...
    <script src="//ajax.googleapis.com/ajax/libs/webfont/1/webfont.js"></script>
    <script>
    WebFont.load({
      custom: {
        families: ['FFFTusjBold'],
        urls: ['stylesheet.css']
      }
    });
    </script>
   
    <link rel="stylesheet" href="stylesheet.css" type="text/css" charset="utf-8">

    <style type="text/css" media="screen">
        body {font-family: Helvetica, Arial, sans-serif; color:#333;}
        .FFFTusjBold {
            font-weight: normal;
            font-style: normal;
            line-height:normal;
            font-family: 'FFFTusjBold', sans-serif;
            font-size-adjust: 0.51;
        }
       
        /* we want FFFTusjBold to be applied to all elements with a class .FFFTusjBold */
        .wf-loading .FFFTusjBold {
          visibility: hidden;
        }
        .wf-active .FFFTusjBold, .wf-inactive .FFFTusjBold {
          visibility: visible;
            font-family: 'FFFTusjBold', sans-serif;
        }
    </style>

Firstly we load the Webfont script straight from google and add a couple of necessary parameters so the page can recognise what fonts we want to preload. We need to seperate out the location of the @font-face rule to make sure the site is optimised. I haven't tested it but I can't see why you wouldn't be able to leave your @font-face rules in your original css and create a new one for the Webfont commands.

We then create some css specific to this script. These css commands are called by javascript to hide the elements of your choosing while the fonts are loading. Once they have loaded, the css is altered to .wf-active which you style as you see fit. Its best to use the visibility:hidden; / visibility:visible; rules because this will not impact layout.

Just to tie up the loose ends, this is what is contained in the stylesheet.css file, the @font-face magic:

@font-face {
    font-family: 'FFFTusjBold';
    src: url('fff_tusj-webfont.eot');
    src: local('☺'), url('fff_tusj-webfont.woff') format('woff'), url('fff_tusj-webfont.ttf') format('truetype'), url('fff_tusj-webfont.svg#webfont1B4k7TQ5') format('svg');
    font-weight: normal;
    font-style: normal;
}

Is there a Demo?

Of course there is mon frere. Below is a link to the same page as in the demo video above. This has links to the two pages with and without FOUT.

Leave a Reply

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

This article is in the javascript category. Here are some other related articles also in this category.