Search code examples
cssinternet-explorerwebfontsfont-face

Internet Explorer 11 and supported web fonts


I'm using a TTF and OTF web font to catch all major browsers(FireFox, Chrome and IE11) on most devices. It all looks fine, before relocation to the production server and then IE doesn't want to show my icons.

I guess, the brains in Redmond have some kind of feature to stop this working over the Internet, so it works from localhost only.

What's the deal here? What kind of font type do I need to use for IE?


Solution

  • This is the standard way of loading with @font-face, hacky fixes and all -

    @font-face {
        font-family: 'MyWebFont';
        src: url('webfont.eot'); /* IE9 Compat Modes */
        src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
             url('webfont.woff') format('woff'), /* Modern Browsers */
             url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
             url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
        }
    

    hey please check the Compatibility tables for support of EOT, check these links -

    Link 1

    Link 2