title: Icon fonts not loading in IE11
body: <p>We're using icomoon for our icon fonts, and they work fine in Chrome and Firefox, but won't display in IE11... Sometimes.  It seems to work on the first page load, but not on subsequent page loads.  Clearing the cache doesn't seem to reset it.  This issue may be present in other IE versions, right now we're just focusing on IE11.</p>
  
  <p>Here's our @font-face:</p>
  
  <pre><code>@font-face {
  font-family: 'icon';
  src:url('fonts/icon.eot?-3q3vo5');
  src:url('fonts/icon.eot?#iefix-3q3vo5') format('embedded-opentype'),
      url('fonts/icon.woff?-3q3vo5') format('woff'),
      url('fonts/icon.ttf?-3q3vo5') format('truetype'),
      url('fonts/icon.svg?-3q3vo5#rezku') format('svg');
  font-weight: normal;
  font-style: normal;
  }
  
  [class^="icon-"], [class*=" icon-"] {
  font-family: 'icon';
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  }
  .icon-alphabet:before {
  content: "\e600";
  }
  /* etc etc etc */
  </code></pre>
  
  <p>But here's where it gets weird.  Looking at the developer tools, an HTTP request for the fonts is being sent, but only a few hundred bytes are being received (probably just the headers).</p>
  
  <p><img src="https://i.stack.imgur.com/Pi6YS.png" alt="Network panel"></p>
  
  <p>But the HTTP response lists the content length correctly as several kilobytes.</p>
  
  <p><img src="https://i.stack.imgur.com/fBDyK.png" alt="Response headers"></p>
  
  <p>The "Response body" tab just says "No data to view."</p>
  
  <p>You can see in the Network Panel screenshot that the Google Fonts aren't behaving like this.</p>
  
  <p>Pasting the URL in the location bar results in the full file being downloaded.</p>