@font-face in IE: Avoid always downloading font?

Question

When using an IE specific font-face declaration like below:

@font-face{
    font-family:'Arial Narrow';
    font-style:normal;
    font-weight:normal;
    src:url('../fonts/ArialNarrow.eot');
    src:local('Arial Narrow'),
    local('ArialNarrow'),
    url('../fonts/ArialNarrow.eot') format('embedded-opentype'),
    url('../fonts/ArialNarrow.woff') format('woff');
}

From what I can see, even though the font exists as a system font, it insists on downloading the font that my sheet suggests every time. In order to be more efficient, is there a way to only download the font in IE if it's necessary?

Answer 1

With this declaration for IE6+:

@font-face{
    font-family:'Arial Narrow';
    font-style:normal;
    font-weight:normal;
    src:url('../fonts/ArialNarrow.eot');
    src:local('Arial Narrow'),
    local('ArialNarrow'),
    url('../fonts/ArialNarrow.eot') format('embedded-opentype'),
    url('../fonts/ArialNarrow.woff') format('woff');
}

This declaration for FF/Opera/Chrome/Safari:

@font-face{
    font-family:'Arial Narrow';
    font-style:normal;
    font-weight:normal;
    src:local('Arial Narrow'),
    local('ArialNarrow'),
    url('../fonts/ArialNarrow.ttf') format('truetype');
}

IE 6/7/8 and lower/IE9+ WITH compatibility mode on: Downloads the linked font no matter what.

Firefox/Opera/Chrome/Safari/IE9+ WITH compatibility mode off: Uses system font when available. Downloads the linked font when system font is unavailable.

Compatibility mode is forced off with:

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

Good news: Fonts are cached in all browsers. They only have to be downloaded once.

Final Answer: There is no way to avoid an @font-face file download in IE 6/7/8 and IE 9+ with compatibility mode on.

Answer 2

If you're specifying "Arial Narrow" I would suggest not using @font-face altogether. It's a very, very common font, and the vast majority of users (Windows & Mac) will have it installed. I would simply specify a fallback font in your normal font-stack:

body {
 font-family: "Arial Narrow", Arial, Helvetica, "sans-serif";
}

If you're using a less-common (i.e. 'non-web-safe') font, then your @font-face is set up exactly how it should be.

Here is a great resource on how common particular fonts are on the web:

http://www.speaking-in-styles.com/web-typography/Web-Safe-Fonts/

Arial Narrow gets a 'likely'.