@fontface in IE7 (IETEster) not working properly

Question

I am using the Sansumi @fontface kit from Fontsquirrel.com. It works correctly in IE6 and IE8 in the IETester program, but in IE7 it does not.

My CSS code is as follows:

@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. This is not an exact simulation, i.e. rendering, as well as a scripting engine.

Answer 2

IETester does not work in many places. I noticed that IE7 on IETester is usually unstable and crashes on me. Try using the IE collection . If the problem persists, I can install the virtual machine running IE7 first and test before assuming that something is wrong with the code.

UPDATE Can you try to reorder:

 @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

It may be a little late, but for those who are still faced with this problem - for example, on Sunday morning I still pull out my hair with outdated browsers. I tested the following on IE6 and IE7 in IETester, and it works Great. Actually, this is 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 on 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 problem is that the IE6 / 7/8 parser does not work and does not work if the font does not follow special rules .

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

Then you need to make sure that the font-family in CSS exactly matches the name of the font family in .eot.