@fontface in IE7 (IETEster) not working properly

Question

I am using the Sansumi @fontface kit by Fontsquirrel.com. It works properly in IE6 and IE8 in the program IETester, but in IE7, it doesnt.

My CSS Code looks like this:

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

}

#block-system-main-menu {border-bottom: 1px solid #cecbcd;}
#navigation ul.menu {
list-style-type:none;
list-style:none;
/*overflow:hidden;*/
/*width:980px;*/
width:795px;
height:32px;
margin-top:0px; 
margin-bottom:0px;
padding-left:0px;
margin-left:auto;
margin-right:auto;

}

#navigation li {
list-style:none;
list-style-type:none;
padding:0;
float:left;
display:inline;
height:32px;
}

/* style list as navigation using float:left */


/* set distance from left corner to the first li item */
#navigation ul.menu li:first-child {
/*margin-left:75px;*/
}

#navigation ul.menu li ul li:first-child {
margin-left:0px;
}

#navigation ul.menu li ul  {
display:none; position:absolute; top:32px; margin:0px; padding:0; float:left; border:none; height:32px; max-height:32px; width: auto;
}

#navigation ul.menu li:hover ul {/*display:block;*/}

#navigation ul.menu li:hover ul li {height:32; padding-top:0px; position: relative; display:inline; background-image:none; float:left; }

#navigation ul.menu li a {
/*background-color:#ffffff; */
font: 9pt / 24pt 'SansumiRegular', Arial, sans-serif;
letter-spacing:1px;
text-decoration:none;
color: #666666;
height: 32px;
background-image:none;
font-weight:normal;
display:block;
padding-left:22px;
padding-right:22px;
margin-right:5px;
margin-left:5px;
float: left;
}

#navigation ul.menu li ul li a {
/*background-color:#ffffff; */
font: 9pt / 24pt 'SansumiRegular', Arial, sans-serif;
text-decoration:none;
color: #666666;
height: 32px;
background-image:none;
font-weight:normal;
display:block;
float: left;
}

#navigation ul.menu li ul li a:hover, #navigation ul.menu li ul li.active-trail a.active-trail {
/*background-color:#ffffff; */
font: 9pt / 24pt 'SansumiRegular', Arial, sans-serif;
text-decoration:underline;
color: #666666;
height: 32px;
font-weight:normal;
background-image:none;
display:block;
float: left;
}

#navigation ul.menu li a:hover {
font: 9pt / 24pt 'SansumiRegular', Arial, sans-serif;
text-decoration:none;
color: #ffffff;
height: 32px;
background-image:url('../images/navi_active.png');
font-weight:normal;
background-position:center;
background-repeat:no-repeat;

}

#navigation ul.menu li a.active, #navigation ul.menu li.active-trail a.active-trail {
font: 9pt / 24pt 'SansumiRegular', Arial, sans-serif;
text-decoration:none;
color: #ffffff;
font-weight:normal;
height: 32px;
background-image:url('../images/navi_active.png');
background-position:center;
background-repeat:no-repeat;

}

div.region-header ul.menu {
display:none;
}

Answer 1

Stay away from IEtester. It's not an accurate simulation of ie's rendering and also scripting engine.

Answer 2

IETester does fail in a lot of places. I have noticed that IE7 on IETester is generally unstable and crashes on me as well. Try using IE collection. If the problem persists I would install a VM running IE7 first and test on that before assuming there is something wrong with the code.

UPDATE Can you try changing the order:

@font-face {
 /* for IE */
 font-family: 'SansumiExtraBoldRegular';
 src: url('../fonts/Sansumi-ExtraBold-webfont.eot');
}

@font-face {
/* for other browsers */
font-family: 'SansumiExtraBoldRegular';
    src: url('../fonts/Sansumi-ExtraBold-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/Sansumi-ExtraBold-webfont.woff') format('woff'),
         url('../fonts/Sansumi-ExtraBold-webfont.ttf') format('truetype'),
         url('../fonts/Sansumi-ExtraBold-webfont.svg#SansumiExtraBoldRegular') format('svg');
}

Answer 3

This might be a bit late, but for anyone who's still running into this problem - like me on a Sunday morning still ripping out my hair with legacy browsers - I've tested the following on IE6 and IE7 in IETester and it works great. Actually, it's really close to what you had Martin:

@font-face
{
    font-family: "example-font-family";
    src: url("./fonts-location/Font.eot");
    src: url("./fonts-location/Font.eot?iefix") format("eot"),
         url("./fonts-location/Font.ttf") format("truetype");
}

Works great in Firefox too! Hope this helps someone!

Answer 4

@font-face web fonts work in IE6/7/8 in the current version of IETester (example).

The issue is that IE6/7/8 .eot parser is buggy and doesn't work unless the font follows some special rules.

For example, the font name must begin with or be equal to the family name. You can use Fontforge to edit your font and ttf2eot to re-generate the .eot from it or just use the free online webfont generator.

Then you should make sure font-family in the CSS exactly matches the font family name in the .eot.