Search code examples
cssstylesheetcross-browser

Why is my @font-face broken in ie9 only?


I'm in the ie testing phase of a site build and I cannot get the fonts to work in ie9. The strange part is that they work just fine in ie7 & ie8 AND in compatibility mode. Perhaps even stranger is the fact that the demo files work just fine. I realize this suggests I might have the plumbing messed up, but I can't find the issue anywhere.

I'm wondering if something is breaking all of the fonts in ie9 for this site -- they all look like 'times new roman' to me.

EDIT: updated the code below. Still experiencing the issue.

Below is some relevant info and sample code for one of the fonts in question. There are 5 fonts in total, and they are all set up this exact way and experiencing the same problem.

Testing Site: http://dev.citylightphilly.com

File structure: all fonts & stylesheet.css in /wp-content/themes/my_theme/fonts/

HTML (in header.php)

<!-- @Font-Face Webfonts --> 
    <link rel="stylesheet" href="<?php bloginfo('stylesheet_directory'); ?  >/fonts/stylesheet.css" />
<!-- CSS : implied media="all" -->
    <?php versioned_stylesheet($GLOBALS["TEMPLATE_RELATIVE_URL"]."style.css?v=2") ?>

CSS (/fonts/stylesheet.css)

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

CSS (style.css)

h3, h4, h5, h6, nav {
  font-family: 'NovecentowideBold', 'Myriad Headline', Tahoma, Calibri, sans-serif;
}

Solution

  • I think it might be the code in the CSS found in

    http://dev.citylightphilly.com/wp-content/themes/citylight2/style.css

    Try removing this section:

    body, p, li { 
      font-family: ;
      line-height: 150%;
    }
    

    Everything else looks good to me.