title: ASP.NET MVC not loading FontAwesome correctly (blurry)
body: <p>I might have missed something here, but I feel like I've done every thing possible according FontAwesome's instructions, but I simply cannot get that beautiful smooth font working. My font is less smooth and I don't even think it's set to FontAwesome.</p>
  
  <p>Here's a picture showing my problem in Firefox. It's the same in IE9.
  <img src="https://i.stack.imgur.com/nCFw7.png" alt="FontAwesome problem"></p>
  
  <p>I am using ASP.NET MVC 4 and Bootstrap (less) and FontAwesome (less) with BundleTransformer.
  Here's my BundleConfig class:</p>
  
  <pre><code>public class BundleConfig
  {
      public static void RegisterBundles(BundleCollection bundles)
      {
          var cssTransformer = new CssTransformer();
          var jsTransformer = new JsTransformer();
          var nullOrderer = new NullOrderer();
  
          var modernizrBundle = new Bundle("~/bundles/modernizr")
              .Include("~/Scripts/modernizr-*");
          modernizrBundle.Transforms.Add(jsTransformer);
          modernizrBundle.Orderer = nullOrderer;
  
          var jsBundle = new Bundle("~/bundles/js")
              .Include("~/Scripts/jquery-{version}.min.js")
              .Include("~/Scripts/bootstrap.js");
          jsBundle.Transforms.Add(jsTransformer);
          jsBundle.Orderer = nullOrderer;
  
          var cssBundle = new Bundle("~/bundles/css")
              .Include("~/Content/less/bootstrap.less")
              .Include("~/Content/less/responsive.less");
          cssBundle.Transforms.Add(cssTransformer);
          cssBundle.Orderer = nullOrderer;
  
          bundles.Add(modernizrBundle);
          bundles.Add(jsBundle);
          bundles.Add(cssBundle);
  
          BundleTable.EnableOptimizations = true;
      }
  }
  </code></pre>
  
  <p>I have edited the bootstrap.less file to include <code>@import "font-awesome.less";</code> instead of <code>@import "sprites.less";</code>, and I have corrected the path to the FontAwesome font directory in font-awesome.less (<code>@FontAwesomePath: "../font";</code>).</p>
  
  <p>The generated source code of my page:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;meta charset="utf-8" /&gt;
      &lt;meta name="viewport" content="width=device-width" /&gt;
      &lt;title&gt;&lt;/title&gt;
      &lt;link href="/bundles/css?v=PzV9CBTBs7_DCIpcfH8cCcOoepY8EiM_IKgyY6a02Mw1" rel="stylesheet"/&gt;
      &lt;script src="/bundles/modernizr?v=N72c_KKpFDVtSEIZ3CtjgoN7eDH9Wa28lL9Ncn1mtUw1"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div&gt;
          &lt;p&gt;
            &lt;a class="btn btn-success" href="#"&gt;&lt;i class="icon-shopping-cart icon-large"&gt;&lt;/i&gt; Checkout&lt;/a&gt;
          &lt;/p&gt;
  
          &lt;script src="/bundles/js?v=7PBTQq6BUbxyT95hBnk4xN3Qb852Tl2pCmQoTS6PuLs1"&gt;&lt;/script&gt;        
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>I have verified that the font path in the generated css points to the correct FontAwesome font files and they are there. Firefox confirms this when loading the page:</p>
  
  <pre><code>[12:24:45.372] GET http://localhost:57700/ [HTTP/1.1 200 OK 1040ms]
  [12:24:46.457] GET http://localhost:57700/bundles/css?v=PzV9CBTBs7_DCIpcfH8cCcOoepY8EiM_IKgyY6a02Mw1 [HTTP/1.1 200 OK 7ms]
  [12:24:46.458] GET http://localhost:57700/bundles/modernizr?v=N72c_KKpFDVtSEIZ3CtjgoN7eDH9Wa28lL9Ncn1mtUw1 [HTTP/1.1 200 OK 5ms]
  [12:24:46.459] GET http://localhost:57700/bundles/js?v=7PBTQq6BUbxyT95hBnk4xN3Qb852Tl2pCmQoTS6PuLs1 [HTTP/1.1 200 OK 12ms]
  [12:24:47.695] GET http://localhost:57700/Content/font/fontawesome-webfont.woff?v=3.0.1 [HTTP/1.1 200 OK 2ms]
  </code></pre>
  
  <p>I tried setting the font-family of the link to FontAwesome, but then the font is totally off.</p>
  
  <p>What am I missing here?</p>