Forums

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

Home Forums CSS @font-face Style Linking – CAN it work in IE7-8??

  • This topic is empty.
Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #39196
    jethro
    Participant

    Hi, I’ve been searching everywhere for the last week to find a definitive answer to the question: Is it actually possible to do style linking with your @font-face declarations and have it use the proper font faces in IE7-8 (when just using 4 basic variations – normal/bold/italic/bold-italic)?

    In our tests, with a single self-hosted font and just 4 variations (normal, bold, italic, bold-italic), all browsers understand the @font-face style linking properly and apply the right face for bold/italic/bold-italic type. But our good friend IE recognizes the normal face properly, then just applies a ‘faux’ bold & italic to all instances of bold/italic/bold-italic type! It looks terrible.

    We’ve tried most every variation of popular syntax, including the original Paul Irish ‘Bulletproof’ method, updates to that, the ‘Smiley’ syntax, the recommended syntax from Fonts.com (where we’re getting the fonts from), and even what’s listed here: https://css-tricks.com/snippets/css/using-font-face/. They all seem to have the same issues with IE7-8 : bold is ‘super-bold’ and italic is ‘extra-italic’. It just looks bad.

    Here’s our test page: http://joomla25.lanetest.com/index.php/client-test-article

    So I’ve found a few discussions about style linking that seem to indicate it is just NOT possible in IE7-8 at all. That seems to be what I’m finding.

    HOWEVER, there are also a couple discussions that state that IE6-8 can’t handle style linking when MORE THAN 4 STYLE/WEIGHT VARIANTS are used. We’re not doing more than 4!
    See here (toward bottom of page): http://help.typekit.com/customer/portal/articles/6855-using-multiple-weights-and-styles
    And here: http://blog.typekit.com/2011/06/27/new-from-typekit-variation-specific-font-family-names-in-ie-6-8/

    But the most confusing thing is that we have definitely been doing this with 2 different hosted solutions: FontsLive.com and Typekit. We add the 4 basic variations of a font to our ‘project’, then give them all the same font-name, and lastly just add that font-name to our master font-family stack on our body tag. Every instance of styling that asks for bold/italic/bold-italic, whether with font-weight/font-style rules, or just applying strong/em, just works. EVEN IN IE7-8!!! So it sure seems like this is possible! Unfortunately, FontsLive.com was bought out by Fonts.com and they use a different method. This is why we’re trying their self-hosting option – to see if we can get that easy solution back.

    – Anyone have any insight I’m missing here???

    THANKS!

    #107276
    chrisburton
    Participant

    @jethro Why not just upload the different font style variations and then set them appropriately?

    #107278
    jethro
    Participant

    Hi, I know we can use different names for each face. The main reasons we prefer not do this method are:

    A) It’s so much simpler and more efficient in the CSS to only list the embedded font in one main font-family stack and then style as you normally would for standard web-safe desktop fonts. This makes is especially easy to try different font choices. On some large sites we do, we may have many, many rules defining items as bold/italic/bold-italic that would need to be updated.

    B) Even bigger, doing it that way does not allow for a standard fallback font in case the web-served font doesn’t work for some reason. As you have to add more declarations to all ‘bold/italic/bold-italic’ rules to ‘reset’ them back to ‘font-weight/style: normal’, if the web-served font didn’t load properly, the fallback would be completely messed up (no bold/italic/bold-italic anywhere).

    We have just always used style linking with the hosted solutions, so we are wondering why we can’t get it to work with self-hosted. We would never think to jump through all those style hoops for desktop fonts (Arial, Helvetica, etc.).

    #107279
    chrisburton
    Participant

    @jethro

    B) I don’t see that to be true unless I’m not fully understanding what you’re stating.

    This is how I do it (example only)

    @font-face {
    font-family: 'ProximaNovaRegular';
    src: url('proximanova_regular-webfont.eot');
    src: url('proximanova_regular-webfont.eot?#iefix') format('embedded-opentype'),
    url('proximanova_regular-webfont.woff') format('woff'),
    url('proximanova_regular-webfont.ttf') format('truetype'),
    url('proximanova_regular-webfont.svg#proximanovaitalicRegular') format('svg');
    font-weight: normal;
    font-style: normal;

    }

    @font-face {
    font-family: 'ProximaNovaItalic';
    src: url('proximanova_italic-webfont.eot');
    src: url('proximanova_italic-webfont.eot?#iefix') format('embedded-opentype'),
    url('proximanova_italic-webfont.woff') format('woff'),
    url('proximanova_italic-webfont.ttf') format('truetype'),
    url('proximanova_italic-webfont.svg#proximanovaitalicObliqueRegular') format('svg');
    font-weight: normal;
    font-style: normal;

    }

    @font-face {
    font-family: 'ProximaNovaBold';
    src: url('proximanova_bold-webfont.eot');
    src: url('proximanova_bold-webfont.eot?#iefix') format('embedded-opentype'),
    url('proximanova_bold-webfont.woff') format('woff'),
    url('proximanova_bold-webfont.ttf') format('truetype'),
    url('proximanova_bold-webfont.svg#proximanovaBoldRegular') format('svg');
    font-weight: normal;
    font-style: normal;

    }

    And then to declare that in a p tag I would do the following

    p {font: normal 300 18px "ProximaNovaRegular", FallbackFontHere, sans-serif;}

    Tested all the way down to IE 7 and it works.

    #107280
    jethro
    Participant

    Hi Christopher,
    Thanks for the reply, I appreciate it! And yes, I do understand that method.

    But let’s say you wanted a heading to be bold-italic, you would need to do something like:


    h3 {font-family: 'ProximaNovaBoldItalic', Arial, sans-serif; font-weight: normal; font-style: normal;}

    This would present your Proxima headline properly, using the proper bold-italic face and not applying additional ‘faux’ bold & italic to it. But your fallback font (Arial in this case) would display as normal, not bold-italic.

    And obviously you would have to go along all of the other type rules (like p or h3) and add all the extra font-family, weight and style declarations. Just not efficient.

    – Anyone know the answer to the original question about if it CAN be done???

    #107282
    chrisburton
    Participant

    @jethro OH! I see what you mean. But that is why we usually have separate IE stylesheets to handle specific IE issues.

    #107924
    jethro
    Participant

    Just to let anyone looking into this issue know, it IS in fact possible to do internal font style linking in older versions of IE. In my case, it turned out that the font files (from Fonts.com/Monotype) did not have the proper internal naming and style declarations which IE mistakenly uses over the CSS declarations you use.

    More details about the issue and the fix are on this thread: http://typophile.com/node/95303#comment-519101

    #107928
    chrisburton
    Participant

    You might want to pay attention to that last comment.

    #107942
    chrisburton
    Participant

    @JoshWhite I don’t believe Typekit offers that specific font.

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