Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS @font-face for h1 not working for IE8

  • This topic is empty.
Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #38339
    Rocko
    Participant

    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; }
    #103881
    Rocko
    Participant

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

    #103882
    TheDoc
    Member

    Do you have a link?

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

    #103883
    Rocko
    Participant

    Sry, forgot to add link :)

    Your text to link…

    #103884
    Senff
    Participant

    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.

    #103885
    Rocko
    Participant

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

    #103893
    chrisburton
    Participant

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

    #107381
    Silverman
    Member

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

    #107389
    Rocko
    Participant

    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?

    #107390
    Rocko
    Participant

    @ChristopherBurton Thanks!

Viewing 10 posts - 1 through 10 (of 10 total)
  • The forum ‘CSS’ is closed to new topics and replies.