Search code examples
csswordpressinternet-explorerfont-facefont-family

CSS: IE "ignores" font-family, except for in body

I'm having trouble getting IE to recognise a font in a wordpress site I'm testing. I'm using Helvetica for most of the site, and "Harabara" for certain smaller sections. To do this I have the body's font-family set to Helvetica and the font-family of the smaller parts set to "Harabara". Here's the @font-face:

@font-face {
font-family: 'HarabaraBold';
src: url('/harabara-webfont.eot');
src: url('/harabara-webfont.eot?#iefix') format('eot'),
     url('/harabara-webfont.woff') format('woff'),
     url('/harabara-webfont.ttf') format('truetype'),
     url('/harabara-webfont.svg#webfontHeOfUYwt') format('svg');
     font-weight: normal;
     font-style: normal;
}

and here's the body:

body {
font-size:100%/130%;
line-height: 1;
color: black;
background: #fff;
font-family:Helvetica,Times New Roman,Verdana,Garamond;
width:100%;
}

and an example of a subsection that uses Harabara:

#sidebar-homepage li{
list-style: none;
font-family: 'HarabaraBold';
letter-spacing: 1px;
font-size: 1.1em; 
text-align: left;
margin-top: 40px;
margin-left: 4px;
text-shadow:1px 1px 1px #3fa3b8;
}

When I view the webpage in Chrome/FF the sidebar-homepage list items display correctly, in the harabara font. When I test the page in IE, the sidebar list items initially display in harabara but, oddly, switch to Helvetica once the mouse cursor enters the window.

I'm not sure if its a problem with the @font-face, but I've tried the suggestions here

without any luck.

Also apologies, but there's no live version of this site to show I'm afraid.

Solution

  • Solved. I cleaned up the CSS a little: where previously I had font family in sections like "#sidebar-homepage li", I removed them and put them into the "#sidebar-homepage" section. It started working after that. No idea why!