Forums

Rockomole

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; }

knittingfrenzy18

I think generally font-face is a CSS3 feature and is not fully implemented in all browsers yet, let alone IE8.

Rockomole

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.

Rockomole

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.

Rockomole

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.

Rockomole

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?

Rockomole

@ChristopherBurton Thanks!

treehouse : what would you like to learn today?

Forums

@font-face for h1 not working for IE8