@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;
}

score 1 · Answer 1 · answered Oct 23 '11 at 10:33

1

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

answered Oct 23 '11 at 10:33

Moin Zaman

25,281
6
70
74

rustyx · Answer 2 · 2014-12-14T20:51:19.503

@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.

eot-good

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

Ali · Answer 3 · 2011-08-24T11:16:42.223

0

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');
}

edited Aug 24 '11 at 11:16

answered Aug 24 '11 at 09:45

Ali

12,354
9
54
83

the ie7 is greyed out on the installation when i try to install ie collection – Martin Huwa Aug 24 '11 at 10:14
I would try to setup a VM running XP then and install IE Collection on that. Personally I use an XP VM for most of my IE testing. – Ali Aug 24 '11 at 10:27
as i looked into the network tab of ie9 (in ie7 mode) then i saw that there were no eot files loaded but in ie8 and ie9 – Martin Huwa Aug 24 '11 at 10:30
Does this sound like the IE7 bug you are experiencing http://www.fiftyonereasons.com/2010/02/ie7-font_face-bug-and-fix/ – Ali Aug 24 '11 at 10:50
no, i downloaded the original fontface kit from fontsquirrel and in ie7 there doesnt event load / appear the fontface eot file in the network tab of the developer plugin but in the other versions it does – Martin Huwa Aug 24 '11 at 10:52
I recall reading somewhere that order mattered. Can you try changing the order of your font includes as shown above? (basically move the eot file to the end) – Ali Aug 24 '11 at 11:09
Did you check after my correction? (i.e. breaking @font-face into 2 blocks? also, the `?#iefix` should just be `?iefix` I believe – Ali Aug 24 '11 at 11:19
no, ie7 doesnt event load the eot file, see there no eot file in the network tab in ie7 but in ie8 security issue of ie7 with local fonts? and the fontsquirrel css should work normally in all browsers like they save and its bulletproof – Martin Huwa Aug 24 '11 at 11:24
yeah, font-squirrel is pretty bullet-proof, I'll go back to my original statement and try to find a native install of IE7 to test on before wasting any more time with this. – Ali Aug 24 '11 at 11:26
i tried it with the original one and also with ietester and the ie collection all the same – Martin Huwa Aug 24 '11 at 11:29
`IE collection` doesn't work on Windows 7 64-bit. It can't install any IE above 6 and the IE6 that it installs crashed on startup. – rustyx Oct 28 '14 at 08:30

score 0 · Answer 4 · answered Oct 23 '11 at 10:28

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!

@fontface in IE7 (IETEster) not working properly

4 Answers4

Linked