title: IE 10 not loading fonts
body: <p>Link to site in question: <a href="http://qbtei.com/nationalretail/public" rel="noreferrer">http://qbtei.com/nationalretail/public</a></p>
  
  <p>In my fonts.css i am loading a bunch of fonts like so:</p>
  
  <pre><code>@font-face {
      font-family: GothamBook;
  src: url('../fonts/Gotham-Book.otf');
  src: url( ../fonts/Gotham-Book.otf ); /* IE */
      }
  
  @font-face {
      font-family: GothamBookItalic;
  src: url('../fonts/gothambookitalic.otf');
  src: url( ../fonts/gothambookitalic.otf ); /* IE */
      }
  
  @font-face {
      font-family: GothamBold;
      src: url('../fonts/gothambold.otf');
      src: url( ../fonts/gothambold.otf ); /* IE */
  }
  </code></pre>
  
  <p>in Firefox/chrome these fonts work no problem, but in IE 10 when i inspect element this css file appears as empty and the fonts are not loaded</p>
  
  <p>I have tried using <a href="http://www.fontsquirrel.com/tools/webfont-generator" rel="noreferrer">http://www.fontsquirrel.com/tools/webfont-generator</a> to create a new font css sheet which looked like this, but this ended up not working in either firefox, chrome, or Internet Explorer</p>
  
  <pre><code>@font-face {
      font-family: 'gotham_boldregular';
      src: url('gothambold-webfont.eot');
      src: url('gothambold-webfont.eot?#iefix') format('embedded-opentype'),
           url('gothambold-webfont.woff') format('woff'),
           url('gothambold-webfont.ttf') format('truetype'),
           url('gothambold-webfont.svg#gotham_boldregular') format('svg');
      font-weight: normal;
      font-style: normal;
  
  }
  </code></pre>
  
  <p>I use my fonts in the css like this :</p>
  
  <pre><code>.nav-text{
      font-family: GothamLight;
      font-size: 21px;
      color: #d9e3e9;
      font-weight: 100;
      position: absolute;
    right: 28px;
    top: 13px;
  }
  </code></pre>