Grow your CSS skills. Land your dream job.

@font-face for h1 not working for IE8

  • # June 4, 2012 at 6:01 pm

    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; }
    # June 4, 2012 at 6:41 pm

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

    # June 4, 2012 at 6:55 pm

    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. :/

    # June 4, 2012 at 7:37 pm

    Do you have a link?

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

    # June 4, 2012 at 7:42 pm

    Sry, forgot to add link :)

    Your text to link…

    # June 4, 2012 at 8:14 pm

    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.

    # June 4, 2012 at 8:27 pm

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

    # June 4, 2012 at 10:23 pm

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

    # August 6, 2012 at 12:10 pm

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

    # August 6, 2012 at 2:18 pm

    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?

    # August 6, 2012 at 2:19 pm

    @ChristopherBurton Thanks!

Viewing 11 posts - 1 through 11 (of 11 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".