Question

I’m using @font-face on a website. The code works and in Firefox, Chrome, and Opera the @font-face font loads perfectly. The code used is the same that’s generated by Font Squirrel. This is the @font-face code:

@font-face {
    font-family: 'OpenSansRegular';
    src: url('fonts/OpenSans-Regular-webfont.eot');
    src: url('fonts/OpenSans-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/OpenSans-Regular-webfont.woff') format('woff'),
         url('fonts/OpenSans-Regular-webfont.ttf') format('truetype'),
         url('fonts/OpenSans-Regular-webfont.svg#OpenSansRegular') format('svg');
    font-weight: normal;
    font-style: normal;

}

And the font is then called using this code:

font-family: "OpenSansRegular",Arial,sans-serif;

However, in IE9 it still works but is very clunky. When the page is loaded initially, the Arial font is loaded first, and after about 1 or 2 seconds the OpenSansRegular font is then loaded. This obviously spoils the experience of the site as the page is loaded with one font then the other font is booted on to the page after a period of time.

Is there a way to prevent this from happening while still using @font-face?

Answer 1

In IE 9, the use of data: attribute is fully supported. In this case, you can modify the CSS this way:

@font-face {
    font-family: 'OpenSansRegular';
    src: url('data:font/eot;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAggg=='); /* IE 9 */
    font-weight: normal;
    font-style: normal;
}

This will make sure only when the CSS completely loads, it loads the fonts too. Hope it helps.