CODEWITHSUNDEEP
htmlcssfontsinternet-explorer-8font-face
Zertalx
Zertalx

Reputation: 79

Font-face not working IE7/IE 8

I want to add a font to a site, but I can't make it work in IE7 and IE8. It works in Firefox, Chrome and IE 9. I have tried some solutions I found but none of them work. I tried this:

@font-face {
font-family: 'MyriadPro-SemiboldCond';
src: url('/static/fonts/MyriadPro-SemiboldCond.eot');
src: local('☺'), url('/static/fonts/MyriadPro-SemiboldCond.woff') format('woff'), url('/static/fonts/MyriadPro-SemiboldCond.ttf') format('truetype'), url('/static/fonts/MyriadPro-SemiboldCond.svg') format('svg');
font-weight: normal;
font-style: normal;
}

Also tried this:

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

}

It looks good to me, but obviusly I am missing something. I don't know if the font I am using "MyriadPro" is the problem.

Is there another way of doing this in IE7/IE8? The javascript solutions like cufon make the text unselectable.

Upvotes: 1

Views: 2954

Answers (1)

Josh Powell
Josh Powell

Reputation: 6297

This works fine for me in IE7&8 but if there is a problem like this happening then you should look into another option like googlefonts

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

Using google fonts:

<link href='http://fonts.googleapis.com/css?family=Berkshire+Swash|Press+Start+2P' rel='stylesheet' type='text/css' />

Upvotes: 1

Related Questions