How to prevent IE7 from downloading all EOT files used for font-face declaration?

Question

How to prevent IE7 from downloading all EOT files used for font-face declaration?

862 views Asked by Mandeep At 25 November 2024 at 05:59

I need some assistance here. We are using custom fonts (non-standard fonts) for our site and use the following font-face declaration (declared in our global css):

@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 */
    font-weight: normal;
    font-style: normal;
    }

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

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

So, far it has performed above our expectations… except one issue with IE7.

For some reason IE7 downloads all EOT files (as declared/used in font-face declarations), even though the page currently loaded in the browser, only used one or two font variations.

Please advise, what are we missing/what needs to be changed to fix this issue?

Original Q&A

There are 1 answers

**doptrois** · Answer 1 · 2012-06-04 15:50:46

You can use Conditional Comments for it via sniffing the browsers version.

HTML:

<html>
    <head>
        <title>Example</title>

        <!--[if lte IE 8]> <link rel="stylesheet" href="font-face-lte8.css" type="text/css" media="" title="" charset="utf-8"> <![endif]-->
        <!--[if gte IE 9]> <link rel="stylesheet" href="font-face-gte9.css" type="text/css" media="" title="" charset="utf-8"> <![endif]-->
        <link rel="stylesheet" href="font-face-allothers.css" type="text/css" media="" title="" charset="utf-8">

    </head>
</html>

CSS for font-face-lte8.css:

@font-face {
    font-family: 'MyWebFont';
    src: url('webfont.eot?#iefix') format('embedded-opentype'); /* IE6-IE8 */
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'MyWebFont';
    src: url('webfontbold.eot?#iefix') format('embedded-opentype'); /* IE6-IE8 */
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'MyWebFont';
    src: url('webfontitalic.eot?#iefix') format('embedded-opentype'); /* IE6-IE8 */
    font-weight: normal;
    font-style: italic;
}

CSS for font-face-gte9.css

@font-face {
    font-family: 'MyWebFont';
    src: url('webfont.eot'); /* IE9 Compat Modes */
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'MyWebFont';
    src: url('webfontbold.eot'); /* IE9 Compat Modes */
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'MyWebFont';
    src: url('webfontitalic.eot'); /* IE9 Compat Modes */
    font-weight: normal;
    font-style: italic;
}

CSS for font-face-allothers.css

@font-face {
    font-family: 'MyWebFont';
    src: url('webfont.woff') format('woff'), /* Modern Browsers */
         url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
         url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'MyWebFont';
    src: url('webfontbold.woff') format('woff'), /* Modern Browsers */
         url('webfontbold.ttf')  format('truetype'), /* Safari, Android, iOS */
         url('webfontbold.svg#svgFontName') format('svg'); /* Legacy iOS */
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'MyWebFont';
    src: url('webfontitalic.woff') format('woff'), /* Modern Browsers */
         url('webfontitalic.ttf')  format('truetype'), /* Safari, Android, iOS */
         url('webfontitalic.svg#svgFontName') format('svg'); /* Legacy iOS */
    font-weight: normal;
    font-style: italic;
}

This will solve the problem.
For info: IE9 supports TTF and WOFF files, so IE9 may download these too, even if he didn't need them.

TechQA.

How to prevent IE7 from downloading all EOT files used for font-face declaration?

There are 1 answers

Related Questions in INTERNET-EXPLORER-7

Related Questions in FONT-FACE

Related Questions in EOT

Popular Questions

Popular Tags

Trending Questions