1

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;
}
timshutes
  • 2,259
  • 3
  • 22
  • 28
  • 1
    This is not a wordpress question, it is a CSS question. –  Feb 20 '12 at 00:34
  • Having CSS problems with a WP-powered site does not make it a WP question. Migrating to Stack Overflow where this will be on-topic and will get some quality answers. – EAMann Feb 20 '12 at 01:13
  • 1
    NovecentowideMedium ≠ Novecentowide-Medium – Knu Feb 20 '12 at 03:03
  • Good catch - actually a typo in the code above but not in my css file - I must have made the mistake when I was copying it over. Fixed it in the edit. The issue is actually happening with all the @ fonts on the site. I'm going to dig into the F12 console and see if I can come up with anything. In the mean time I'll update the question above. – timshutes Feb 20 '12 at 03:30

2 Answers2

0

try this one

@font-face {
    font-family: "actuall font name";
    src:url( "http://localhost//fonts/fontname.TTF ");
}

src url should be full with domain.

Adeel Mughal
  • 776
  • 3
  • 12
  • 1
    I actually did some reading up on this issue - and I think ie9 actually blocks cross-domain font requests. See this post:http://stackoverflow.com/questions/5065362/ie9-blocks-download-of-cross-origin-web-font – timshutes Feb 20 '12 at 01:30
  • this work fine for me, maybe you are checking this with ie9 compatibility view, go in f12 developer tools and check by changing Browser Mode... – Adeel Mughal Feb 20 '12 at 02:28
  • nope believe it or not the @font-face actually works in compatibility mode, but not in regular – timshutes Feb 20 '12 at 02:33
0

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.

Font Squirrel
  • 1,571
  • 11
  • 13
  • thanks font squirrel - I'll look into this later this evening when I have some time. I appreciate the input.. I didn't realize I had an empty element there. – timshutes Feb 20 '12 at 18:56
  • Awesome. Sometimes the problems are sneaky. Actually figured this out with the web inspector in Safari. :-p – Font Squirrel Feb 21 '12 at 15:27