0

I keep ketting faux bold and italics in IE7-8. I have read multiple articles about this, but they all target google web fonts. I am hosting my own. See this screenshot example:

enter image description here

Here is how I write my style declarations:

@font-face{
    font-family:"myfont";
    src:url("font.eot");
    src:url("font.eot?#iefix") format("embedded-opentype"),
        url("font.woff") format("woff"),
        url("font.ttf") format("truetype"),
        url("font.svg#a89d6ad1-a04f-4a8f-b140-e55478dbea80") format("svg");
    font-weight:normal;
    font-style:normal;
}
@font-face{
    font-family:"myfont";
    src:url("bold.eot");
    src:url('bold.eot?#iefix') format('embedded-opentype'),
        url("bold.woff") format("woff"),
        url("bold.ttf") format("truetype"),
        url("bold.svg#ed104d8c-7f39-4e8b-90a9-4076be06b857") format("svg");
    font-style:normal;
    font-weight:bold;
}

They all work fine in IE9 and FF/webkit but IE7-8 displays faux bolds no matter what I do. Is there anything I’m missing?

(I also added bold italic and italics in my code, but left them out here)

Charles
  • 50,943
  • 13
  • 104
  • 142
David Hellsing
  • 106,495
  • 44
  • 176
  • 212
  • 1
    Check out http://www.smashingmagazine.com/2012/07/11/avoiding-faux-weights-styles-google-web-fonts/ and http://itsravenous.com/blog/banishing-faux-italic-and-faux-bold--on-css3-fonts-in-IE-8-and-below – isotrope Mar 27 '13 at 15:08

1 Answers1

1

The only sure-fire way I could solve this problem was to give into IE and declare a different @font-face name for bold. Keep the CSS3 solution (like you posted), but add an additional declaration for bold with a different name. Using your example it might look like:

/* THESE FIRST TWO ARE LEFT THE SAME */
@font-face{
    font-family:"myfont";
    src:url("font.eot");
    src:url("font.eot?#iefix") format("embedded-opentype"),
        url("font.woff") format("woff"),
        url("font.ttf") format("truetype"),
        url("font.svg#a89d6ad1-a04f-4a8f-b140-e55478dbea80") format("svg");
    font-weight:normal;
    font-style:normal;
}
@font-face{
    font-family:"myfont";
    src:url("bold.eot");
    src:url('bold.eot?#iefix') format('embedded-opentype'),
        url("bold.woff") format("woff"),
        url("bold.ttf") format("truetype"),
        url("bold.svg#ed104d8c-7f39-4e8b-90a9-4076be06b857") format("svg");
    font-style:normal;
    font-weight:bold;
}
/* SAME AS THE ABOVE BOLD FAMILY, BUT WITH A NEW NAME AND NO font-weight */
@font-face{
    font-family:"myfont-bold";
    src:url("bold.eot");
    src:url('bold.eot?#iefix') format('embedded-opentype'),
        url("bold.woff") format("woff"),
        url("bold.ttf") format("truetype"),
        url("bold.svg#ed104d8c-7f39-4e8b-90a9-4076be06b857") format("svg");
}

Here I left off "font-weight: bold" because that would double-bold the font in this case.

Then, you add something like this to your IE 6-8 CSS file:

b, strong, h1, h2, h3, h4, h5, h6, #top_navigation {
    font-family: 'myfont-bold', 'Arial Bold', Arial, times;
    font-weight: normal !important;
}

Add anything that you want to be bold to the list, and replace "Arial Bold, etc" with other similar font(s) that will be close enough backups. The only problem is if the font doesn't load, those things will have a normal weight. I think that's a risk worth taking.

Here's a good source explaining this issue in greater detail: Banishing faux-italic and faux-bold on CSS3 fonts in IE 8 and below

Good luck!

Keith Wolf
  • 33
  • 3