1

I cannot make font-face work on IE7 and IE8.

The code I used is:

@font-face {
    font-family: 'DroidSans';
    src: url('fonts/DroidSans.eot');
    src: url('fonts/DroidSans.eot?iefix') format('eot'),
         url('fonts/DroidSans.woff') format('woff'),
         url('fonts/DroidSans.ttf') format('truetype'),
         url('fonts/DroidSans.svg#webfont1BSMunJa') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'DroidSans';
    src: url('fonts/DroidSans-Bold.eot');
    src: url('fonts/DroidSans-Bold.eot?iefix') format('eot'),
         url('fonts/DroidSans-Bold.woff') format('woff'),
         url('fonts/DroidSans-Bold.ttf') format('truetype'),
         url('fonts/DroidSans-Bold.svg#webfont1BSMunJa') format('svg');
    font-weight: bold;
}
@font-face {
    font-family: 'Lobster';
    src: url('fonts/Lobster.eot');
    src: url('fonts/Lobster.eot?iefix') format('eot'),
         url('fonts/Lobster.woff') format('woff'),
         url('fonts/Lobster.ttf') format('truetype'),
         url('fonts/Lobster.svg#webfont1BSMunJa') format('svg');
    font-weight: normal;
    font-style: normal;
}

I have read these articles:

They all state this solution should be cross browser compatible:

Browser compatibility: Safari, IE 6-9, IE 9 Compatibility Modes, Firefox, Chrome, iOS, Android, Opera

What am I doing wrong? Is there anyone with experience in these things?

I'm testing this here: dev.holiday.ge/xhtml/

1
  • I think that Ege's answer as far is most useful for you to use. Personally I dont have much experience with google web fonts but at least I dont remember many situations where they have not worked. Apr 27, 2012 at 11:05

4 Answers 4

5

.eot files I generated using this website: http://fontface.codeandmore.com/ had problems, and ie 7-8 wasn't picking them up. I used http://www.fontsquirrel.com/ and fonts load fine now, with my original code!

1
1

I've had your problem before. I've solved it with simple solution. I'm using 2 CSS files. One for IE and one for others. So my <head> is like this:

<link href="styles/css.css" rel="stylesheet" type="text/css" />
<!--[if IE]>
  <link href="styles/css.ie.css" rel="stylesheet" type="text/css" />
<![endif]-->

And these are my CSS files:

/* css.css */
@font-face {
    font-family: 'font';
    src: local("☺"),
    url("fonts/f1.woff") format("woff"),
    url("fonts/f1.ttf") format("truetype");
}

IE Only CSS: (eot)

/* css.ie.css */
@font-face {
    font-family: 'font';
    src: url('fonts/f1.eot');
}

This works for me and I've used it many times before.

3
  • +1 because this should work as it is workaround for IE bug (see my answer) Apr 27, 2012 at 12:19
  • Still doesn't work, this is exactly same as my code above. Smiley is same as ? in the second line of my css.
    – user796443
    Apr 29, 2012 at 12:52
  • Maybe it's about your font. Change and test it with .eot.
    – Vahid
    Apr 29, 2012 at 18:08
0

Is there a particular reason for not using the Google Web Fonts? Both of these fonts are already there and it's much more easier at the cost of some bandwidth. I use them all the time, and I haven't experienced a single problem in IE 7-8-9.

EDIT: As far as the problem goes, I'm not sure but I remember reading something about IE not accepting two src attributes. or multiple values in an src attribute. You might wanna look in to that if you decide to stick with your own css.

3
0

Because Internet Explorer 8 and earlier versions, do not support the @font-face rule.

See http://www.w3schools.com/cssref/css3_pr_font-face_rule.asp

@font-face belongs to CSS3 http://www.w3.org/TR/css3-fonts/

Another Q/A Do IE browsers (IE6, 7, 8) support @font-face?

Features that are not officially/fully supported (see: css3 spec) may still work (visually close) with some hacks.

As you can see, people who wrote articles know this already

What? I don't get it.

The (hack) trick that makes this work is the '?' following the EOT filename. Seriously.

Do you think that this url fits inside some standard, remember that here it is meant to be used only by browser: fonts/DroidSans-Bold.eot?iefix
One article states that in fact it is hack to get around IE bugs. What if these bugs is now fixed? Does it still work?

For reference here is trident version http://msdn.microsoft.com/en-us/library/ms530303(VS.85).aspx and here is something that most call standard http://www.w3.org/TR/css3-fonts/#font-resources see also http://en.wikipedia.org/wiki/Trident_(layout_engine)

4
  • wtf? they do support them. I don't know if officially or not, but @font-face has been a feature in IE since IE6. Yes they only support eot format but hey it's better than no support at all. And FYI, w3schools is not a credible source. It's filled with a lot of mistakes. I suggest refraining from using it.
    – Ege
    Apr 27, 2012 at 10:40
  • And still needs dirty hacks to make it work... I think it is not supported if it need something like this, as i wrote, it may still works or at least it could be visually same (which does not mean same). Apr 27, 2012 at 11:03
  • -1 not true! support is from like version 4 on. w3schools is crap. see w3fools.com
    – Christoph
    Apr 27, 2012 at 11:41
  • @Christoph Yes, it should work from IE4. Trident should support @font-face eot from v3 and added ttf, otf and woff to v5. However, IE css implementation (older) is broken, wrong, nonworking (this is often taken as advantage) so it needs workarounds all the time. It does not work if you follow w3 rules, and it does not work if you follow microsoft rules, however it may work if you follow community rules. Mainly because of bugs it does something else that spacs say. Google maintains working implementation and fixes through Web Fonts, that is what I call support. Apr 27, 2012 at 16:02

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.