Conditional comments not functioning

Question

I'm building a website which needs to use a custom font through @font-face. IE only displays if I use an .eot extension; other browsers only if I use a .ttf extension.

I can't work out though how to use conditional comments to use both - even though I've tried loads of suggestions on the web... Nothing's working for me.

Essentially, I have:

<style>
@font-face{
font-family: Square;
src: url(/wpadmin/fonts/Square.ttf);
}

@font-face{
font-family: Square_IE;
src: url(/wpadmin/fonts/Square.eot);
}

</style>

<!--[if !IE]><!-->
<style>
#Title{
font-family:Square;
}
</style>
<!--<![endif]-->

<!--[if IE]><!-->
<style>
#Title{
font-family:Square_IE;
}
</style>
<!--<![endif]-->

The font only displays correctly in IE here - not in other browsers. If I remove the [if IE] statement, it then displays correctly in other browsers.

I've tried lots of variations, including conditional statements within the html body.

What am I doing wrong?

Not sure, but I think the [if IE] part should be inside the comments, so that other browsers ignore it — Eran Zimmerman Gonen
– Eran Zimmerman Gonen, Commented Apr 3, 2015 at 10:03
You haven't said what version of IE, but conditional comments don't work from version 11 — Tim
– Tim, Commented Apr 3, 2015 at 10:03
It is IE11 - I had heard that newer versions of IE don't support the comments... That's why I put !IE first, in the hope that other browsers would pick that up, but that IE would just be over-ridden by the second comment. But what's the solution then - can I not do conditional CSS at all with IE now? — JohnG
– JohnG, Commented Apr 3, 2015 at 10:07
Thanks Rajeshwar - but where? I tried -ms-font-family: within the #Title css, but it doesn't work... Can anyone point me to an example? — JohnG
– JohnG, Commented Apr 3, 2015 at 10:08

Tim · Accepted Answer · 2015-04-03 10:10:01Z

2

Conditional comments don't work from IE 11, but also this isn't the standard approach. You don't need different font names, you can just do this for a cross-browser list of font files all referencing one name.

/* declare all the files - browser will use the best it understands */

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


/* now just reference the one name */

#Title {
  font-family:Square;
}

answered Apr 3, 2015 at 10:10

Tim

8,7062 gold badges41 silver badges55 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

JohnG Over a year ago

Thanks, Tim - it's not working either tho - with this it's displaying properly in IE but not in other browsers...

JohnG Over a year ago

Ah - works now - I tweaked a bit - thank you. It seems to like only one src: line, rather than two.

Tim Over a year ago

I would expect IE11 to be using the TTF font anyway. caniuse.com/#feat=ttf

Collectives™ on Stack Overflow

Conditional comments not functioning

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related