@font-face for h1 not working for IE8

[Rocko]

I’m using @font-face for the h1 and p tags of my site. Browserlab shows that it’s loading both font styles fine across the site for all browsers (including IE6) except for the h1 tag in IE8. I figured it was down to a CSS conflict, but there really doesn’t seem to be one. Also, it’s not loading the next fonts in the font-family (i.e. Helvetica, Arial), so I’m totally confused as to what’s causing this. Thanks in advance for your help :)

@font-face {

font-family: 'TheSerifLight';

src: url('../fonts/theserif-3-light-webfont.eot') format('embedded-opentype');

src: url('../fonts/theserif-3-light-webfont.eot?#iefix') format('embedded-opentype'),

url('../fonts/theserif-3-light-webfont.woff') format('woff'),

url('../fonts/theserif-3-light-webfont.ttf') format('truetype'),

url('../fonts/theserif-3-light-webfont.svg#TheSerifLight') format('svg');

font-weight: normal;

font-style: normal; }



@media screen and (-webkit-min-device-pixel-ratio:0) {

@font-face {

font-family: 'TheSerifLight';

src: url('../fonts/theserif-3-light-webfont.eot');

src: url('../fonts/theserif-3-light-webfont.eot?#iefix') format('embedded-opentype'),

url('../fonts/theserif-3-light-webfont.svg#TheSerifLight') format('svg');

font-weight: normal;

font-style: normal; }}





h1 {

margin-top:0.2em;

margin-bottom:0.8em;

font-weight:normal;

color:#444;

font-size:30px;

font-family:'TheSerifLight', Helvetica, Arial, sans-serif; }

[Rocko]

The code above works fine in IE7 and IE6, and it works fine in IE8 for the paragraph tags. I’m running some tests now (changed h1 to h2, and to a p tag with class) to see if it’s a CSS conflict. Definitely not a CSS conflict, and I’m now wondering why IE8 is picking up the font used for the p tags, but not the font used for a p tag with a class. :/

[TheDoc]

Do you have a link?

Browserlab is never going to be as good as testing on a machine yourself.

[Rocko]

Sry, forgot to add link :)

Your text to link…

[Senff]

I don’t think it could/would be the reason, but on a related note: you shouldn’t have more than one H1 on a page — unless it’s HTML5, but judging from the doctype that’s not the case.

[Rocko]

That’s right, it’s not HTML5. Thanks for the advise though!

[chrisburton]

@Rockmole I don’t have an answer for you but I just wanted to say that I absolutely love your menu.

[Silverman]

@Rockmole did you ever find a solution to this? I am having exactly the same issue.

[Rocko]

It actually seems to be alright. IE8 in Adobe Browserlab was not showing the embedded font, but when i checked it out on two PCs with IE8, it first loads the embedded font, changes it to default sans-serif, then reverts back to the embedded font (all within a couple seconds). Just goes to show that it’s always best to run these tests on the actual machines :)

Seeing as this is only happening for h1 tags on IE8 for PCs, i’m okay with letting it be as is. Did you run it through a browser tester, or are you having trouble with it on an actual PC?

[Rocko]

@ChristopherBurton Thanks!

[Author]

Posts