@fontface, Google’s WebFont Loader and Cufon

• Tweet

• Tweet

Have been trying to resolve the issue of FOUT (Flash of unstyled text) when using @fontface on IE.

The best solution I found was to use Google’s WebFont loader.

To not allow the default font to show at all before transitioning to the custom font, first hide the elements using CSS with visible:false (on the pre-condition that JavaScript is enabled). Visibility CSS property is used rather than display(:none) so that the elements do take up their respective blocks of space when invisible and waiting for the custom font file to load.

<script type="text/javascript">
     document.write('<style>.ELEMENTNAME{ visibility:hidden;}</style>')
</script>

Run the WebFont loader, referencing the font file that is already within the CSS file. (@fontface syntax example for cross browsers)

function initFont() {
    try {
        WebFontConfig = {
            custom: { families: ['FONTNAMETOBEUSED'],
                urls: ['/Styles/STYLESHEET.css']
            }
        };
        (function () {
            var wf = document.createElement('script');
            wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
            '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
            wf.type = 'text/javascript';
            wf.async = 'true';
            var s = document.getElementsByTagName('script')[0];
            s.parentNode.insertBefore(wf, s);
        })();
   } catch (e) {
         //Possibly add handler here to show invisible elements if Google can't serve up the webfont.js file
   }
}

The WebFont loader will throw a .wf-active CSS class into the html DOM element once the font is loaded and ‘active’, hence set this in CSS to show the hidden element with @fontface

.wf-active .YOURELEMENT {visibility:visible;}

Lastly, if @fontface is not supported by the browser, I can fall back on Cufon to resolve the fonts, especially for IE6. I’m also using Modernizr for feature detection.

if (!Modernizr.fontface) {

        (function () {
            var wf = document.createElement('script');
            wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
            '://localhost/Scripts/cufon.js';
            wf.type = 'text/javascript';
            wf.async = 'true';
            var s = document.getElementsByTagName('script')[0];
            s.parentNode.insertBefore(wf, s);

            //Run cufon in cufon.js, or wait for cufon to load
            setTimeout(function () {
                try {
                    Cufon.replace('.ELEMENTNAME', { fontFamily: 'FONT_NAME_IN_CUFON' });
                } catch (e) { }
            }
            , 1500);
        })();
    }