5

I want to serve different fonts to different browsers (see this question).

Is there a slick way to do this with Sass/Bourbon?

Here's what I have so far:

<!--[if IE]> -->
@include font-face("myicons", "myicons", $weight: normal, $style: normal,
                   $asset-pipeline: false);
<![endif]-->
<!--[if !IE]> -->
@include font-face("myicons", "myicons", $weight: normal, $style: normal,
                   $asset-pipeline: true);
<![endif]-->
Community
  • 1
  • 1
John Bachir
  • 22,495
  • 29
  • 154
  • 227
  • 2
    You cannot include IE conditional comments directly inside of a stylesheet. Your best bet is probably to use SASS to compile a different stylesheet for IE, then load it in your HTML using conditional comments. – Steve Sanders Aug 21 '14 at 20:32
  • 2
    Don't forget it is [deprecated for IE10+](http://msdn.microsoft.com/en-us/library/ie/hh801214(v=vs.85).aspx). – Vitor Canova Aug 22 '14 at 16:11

1 Answers1

1

This problem it's outside the sass scope, because is just a pre processor, and doesn't have a clue about the browser. Also is outside css scope deciding conditions for different browsers.

You could do this adding a ie8 class to the html like html5 boilerplate does and then use a css rule to activate the font.

body {
  @include font-face("myicons", "myicons", $weight: normal, $style: normal, $asset-pipeline: false);

  .ie8 & {
    @include font-face("myicons", "myicons", $weight: normal, $style: normal, $asset-pipeline: true);
  }
}

and in html file

<!--[if IE 8]>         <html class="ie8"> <![endif]-->
<!--[if gt IE 8]><!--> <html>         <!--<![endif]-->
fernandopasik
  • 9,565
  • 7
  • 48
  • 55
  • Would this work for IE10+? If I'm correct, the HTML file would need an additional line: `` for IE10+ to behave like IE9 so the IE conditional comments work. – Alvaro Montoro Aug 22 '14 at 21:33
  • You are correct, IE10 has disabled by default conditionals http://www.quirksmode.org/css/condcom.html – fernandopasik Aug 22 '14 at 22:09