@font-face not working in IE 7

[davelf]

Hi, i have problem with @font-face. Looks perfect in other browser, except IE 7.
Link to my website
http://davejob.com/fontface/

i used this website to convert my font = http://everythingfonts.com

thanks

[Beverleyh]

I *believe* you need to trigger hasLayout in IE7 on the elements that use the font (ref for hasLayout properties http://reference.sitepoint.com/css/haslayout )

For the ones which don't have layout already, try adding zoom:1; to the CSS for elements using the font, and things should be OK.

[davelf]

i already implement your suggestion to add zoom:1, it's still not working in IE.

[Beverleyh]

Does it help if you lay it out like this (format from my Fast-Edit website CSS);
@font-face {
font-family:'MyriadProRegular';
src:url('js/font/myriadpro-regular.eot');
src:url('js/font/myriadpro-regular.eot?#iefix') format('embedded-opentype'),
url('js/font/myriadpro-regular.woff') format('woff'), url('js/font/myriadpro-regular.ttf') format('truetype'),
url('js/font/myriadpro-regular.svg#MyriadProRegular') format('svg');
font-weight:normal; font-style:normal;
}

.myFont {
font-family:'MyriadProRegular'; font-style:normal; font-weight:normal; line-height:1; -webkit-font-smoothing:antialiased;
}

@media screen and (-webkit-min-device-pixel-ratio:0) { /* loads fonts in Chrome */
@font-face { font-family:'MyriadProRegular'; src: url('js/font/myriadpro-regular.svg#MyriadProRegular') format('svg'); }
}

And then add the .myFont class to the elements using the custom font.

In this CSS line-height is the hasLayout trigger.

Also, reason for the ?#iefix query string: http://stackoverflow.com/questions/8050640/how-does-iefix-solve-web-fonts-loading-in-ie6-ie8

[coothead]

Hi there davelf,

I do not understand why you are worrying about IE7 and a custom font. :rolleyes:

IE8 is the latest and final browser for Windows XP.

Why concern yourself with those users who can't be bothered to carry out Windows updates?

Adding a special font is only cosmetic anyway and won't be missed at all.


"What the eye doesn't see, the heart doesn't grieve over" :D

coothead

[davelf]

Does it help if you lay it out like this (format from my Fast-Edit website CSS);
@font-face {
font-family:'MyriadProRegular';
src:url('js/font/myriadpro-regular.eot');
src:url('js/font/myriadpro-regular.eot?#iefix') format('embedded-opentype'),
url('js/font/myriadpro-regular.woff') format('woff'), url('js/font/myriadpro-regular.ttf') format('truetype'),
url('js/font/myriadpro-regular.svg#MyriadProRegular') format('svg');
font-weight:normal; font-style:normal;
}

.myFont {
font-family:'MyriadProRegular'; font-style:normal; font-weight:normal; line-height:1; -webkit-font-smoothing:antialiased;
}

@media screen and (-webkit-min-device-pixel-ratio:0) { /* loads fonts in Chrome */
@font-face { font-family:'MyriadProRegular'; src: url('js/font/myriadpro-regular.svg#MyriadProRegular') format('svg'); }
}

And then add the .myFont class to the elements using the custom font.

In this CSS line-height is the hasLayout trigger.

Also, reason for the ?#iefix query string: http://stackoverflow.com/questions/8050640/how-does-iefix-solve-web-fonts-loading-in-ie6-ie8

Hmm, it's still not working. Beverleyh, what web font converter did you usually use? May be the problem is in the font converter i used.



Hi there davelf,

I do not understand why you are worrying about IE7 and a custom font. :rolleyes:

IE8 is the latest and final browser for Windows XP.

Why concern yourself with those users who can't be bothered to carry out Windows updates?

Adding a special font is only cosmetic anyway and won't be missed at all.


"What the eye doesn't see, the heart doesn't grieve over" :D

coothead

@coothead, thank for your advice.
In Indonesia most of my client still using IE.7, last time i even met a client that asking why the whole website layout really mess up, and then when i check he still using IE.6. So most developer here must make their website compatible in IE.7, how perfect is that?:p

[Beverleyh]

I do it in 2 stages -

First, I use Font2Web: http://www.font2web.com/ to get the font converted, but although the service generates a @font-face CSS sample, I've had problems with it working in Firefox.

Second, I substitute in the CSS from my post higher up (mostly a condensed version of the CSS from IcoMoon that I use for web icon fonts: http://icomoon.io/ ), which does work in Firefox. I also added the little Chrome hack to fix the ordering of fonts and make Chrome antialiase properly.

You can see the result and download a zipped demo from here: http://fofwebdesign.co.uk/template/_testing/font-face/demo.html

Hope that helps

[davelf]

Sorry, do you have another link? this one is not working (http://fofwebdesign.co.uk/template/_testing/font-face/demo.html).

[Beverleyh]

Bear with it - the link is fine - the web host is having issues at the moment so keep trying until the sever comes back online..