title: Hosting Icon Fonts Locally breaks iconfont API call
body: <p>So I've been using WeLoveIconFonts API call to @import their hosted versions of the Entypo icon font, however they have had some downtime recently and I would feel more comfortable if we could host the files ourselves.</p>
  
  <p>I downloaded the file that is called from this bit of CSS</p>
  
  <pre><code>@import url(http://weloveiconfonts.com/api/?family=entypo);
  </code></pre>
  
  <p>Saved it out as a CSS file and re uploaded it to our own server</p>
  
  <p>the new @import url is now</p>
  
  <pre><code>@import url('http://myserver.com/entypo.css');
  </code></pre>
  
  <p>within this file are calls to the individual font files (URL's shown below)</p>
  
  <pre><code>@charset 'UTF-8';
  @font-face {
  font-family: 'entypo';
  font-style: 'normal';
  font-weight: 'normal';
  src: url('http://weloveiconfonts.com/api/fonts/entypo/entypo.eot');
  src: url('http://weloveiconfonts.com/api/fonts/entypo/entypo.eot?#iefix') format('eot'), 
  url('http://weloveiconfonts.com/api/fonts/entypo/entypo.woff') format('woff'), 
  url('http://weloveiconfonts.com/api/fonts/entypo/entypo.ttf') format('truetype'), 
  url('http://weloveiconfonts.com/api/fonts/entypo/entypo.svg#entypo') format('svg');
  }
  </code></pre>
  
  <p>which I also downloaded and re-uploaded to my server and corrected the paths accordingly, i.e.</p>
  
  <pre><code>src: url('http://weloveiconfonts.com/api/fonts/entypo/entypo.eot');
  </code></pre>
  
  <p>becomes</p>
  
  <pre><code>src: url('http://myserver.com/fonts/entypo/entypo.eot');
  </code></pre>
  
  <p>Everything seems to be loading fine from within the NET tab (status is '200 OK') including all fonts and the new stylesheet, however the font does not seem to be being set on the required items, It is simply styling the spans in the default font for the website (Proxima Nova) and displaying boxes with small characters within them. When I check in firebug</p>
  
  <pre><code>font-family: 'entypo';
  </code></pre>
  
  <p>is greyed out and proxima is displayed instead.</p>
  
  <p>Does anyone have any idea where i'm going wrong? My suspicions are that the original @import file is not meant to be called as CSS however the contents of the file it downloads are CSS rules.</p>
  
  <p>Any help would be much appreciated.</p>