CODEWITHSUNDEEP
cssinternet-explorer-8cross-browserinternet-explorer-7
user796443
user796443

Reputation:

cannot make font-face work on IE,7,8

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/

Upvotes: 1

Views: 4770

Answers (4)

user796443
user796443

Reputation:

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

Upvotes: 5

Vahid
Vahid

Reputation: 3442

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.

Upvotes: 1

Sampo Sarrala
Sampo Sarrala

Reputation: 4868

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)

Upvotes: 0

Ege
Ege

Reputation: 1202

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.

Upvotes: 0

Related Questions