Friday, January 18, 2013

Conditional Web Fonts for IE

Internet Explorer has supported eot fonts since version 8 : http://caniuse.com/#search=font-face

Here is how I like to do conditional fonts for IE :

@@font-face {
            font-family"digitalIE";
            srcurl("/img/fonts/digital.eot");
        }
        @@font-face {
            font-family"digitalNonIE";
            srcurl("/img/fonts/digital.ttf") format('truetype');
        }

        #displays {
            font-familydigitalIE,digitalNonIE;
            font-size12px;
        }


It avoids the ttf error :

@font-face failed OpenType embedding permission check. Permission must be Installable.

from preventing the eot font from being used. And browsers like chrome/firefox/safari/opera can happily use the true type fonts.

Also you can convert ttf fonts to eot online over here so you can support IE-8 as well :

convert : otf -> ttf : http://onlinefontconverter.com/
convert: ttf -> eot : http://www.kirsle.net/wizards/ttf2eot.cgi