Search code examples
internet-explorer-9font-face

@font-face flash of unstyled text in internet explorer 9

I'm currently building an asp site with @font-face but I have encountered the dreaded Flash Of Unstyled Text bug in internet explorer 9. So far I have moved my scripts underneath my css files and used the bullet proof syntax. As far as I can tell I have played by the rules but nothing seems to fix this problem. My question is this: Is this bug avoidable or are all these methods merely damage control via getting the browser to download the fonts quicker? I realise there similar questions, but its important for me to know if im just fighting against internet explorer's natural inclination to load fall back fonts whilst it waits for the @font-face. Sadly, I cannot use google web fonts and I'd prefer not hide my content for a few seconds and reveal it with jQuery (not really a fix!).

For those who interested the size of my files are approx 33k.

Solution

  • To prevent the FOUT in IE9, you can embed the TTF-Font-File in CSS via base64-encoding (This solution works in all Browsers)

    Be shure to deliver EOT files to IE <=8

    <!--[if (lte IE 8) & (!IEMobile) ]>
    <link rel="stylesheet" media="screen" href="styles/fontface-ielte8.css" />
<![endif]-->

    Put in your @font-face-rule (fontsquirrel recommended)

    @font-face {
    font-family: 'MaidenDataURITest';
    src: url('MaidenOrange-webfont.eot');
    src: url('MaidenOrange-webfont.eot?#iefix') format('embedded-opentype');
    font-weight: normal;
    font-style: normal;
}

    Next step, include the @font-face-declaration for all other browsers (IE9+ supports media-queries more info:

    <link rel="stylesheet" media="screen and (min-device-width: 1px)" href="styles/fontface.css" />

    Put in your @font-face-rule with the TTF-file via DataURI(base64-encoding):

    @font-face {
    font-family: 'MaidenDataURITest';
    src: url('data:application/octet-stream;base64, [your-base64-data]') format('truetype');
    font-weight: normal;
    font-style: normal;
}

    Therefore use fontsquirrel to generate the DataURI -> expert mode.
    Nice to know: IE8 supports dataURI until 32KiB. IE9 doesn't have such limitation.

    DataURI Generator for all types of files: click here

    live demo from above »

    To improve the download-time

    deliver just the characters you need via unicode-range: http://www.w3.org/TR/css3-fonts/#unicode-range-desc This will cut down the download time and file-size that have to be download (works in IE9+ and newer Browsers, otherwise the whole font will be downloaded)

    @font-face {
    font-family: foo;
    src: url('foo.woff');
    unicode-range: U+31-33;
}

    And the next step you can apply this to set expiration dates for it via .htaccess on apache servers to let the Web-Browser know, he should cache the font-files: This would leave the flash of unstyled content definitely on a revisit.

    <IfModule mod_expires.c>
    ExpiresActive On
    <FilesMatch "\.(eot|woff|ttf|svg)$>
        ExpiresDefault "access plus 10 years"
    </FilesMatch>
</IfModule>

    And then compress the font-files for faster download (via .htaccess-file):

    AddOutputFilterByType DEFLATE  application/vnd.ms-fontobject application/x-font-ttf image/svg+xml

    WOFF-files have allready a gzip compression built in.

    You can create a .htaccess-file on your server and write this properties into. Works well on Apache-Servers :)

    More details:

    Live example: http://georgepantazis.com/demos/fontface-datauri/

    Paul Irish about FOUT: http://paulirish.com/2009/fighting-the-font-face-fout/

    Compatibility details and checklist: http://www.aaronpeters.nl/blog/IE9-performance-checklist