title: @font-face ie problems
body: <p>I have tried a few different ways to include the correct fonts in the CSS.  I know that I need the eot version for the font to work on IE, but I can't get it to recognize it.  I have used font squirrel to convert the fonts, and I have placed the .eot file and .otf file in a folder called "fonts"  Here is my CSS:</p>
  
  <pre><code>@font-face {
      font-family: BebasNeue;
      src: url('fonts/BebasNeue.eot');
      src: url('fonts/BebasNeue.otf') format("opentype");
  }
  </code></pre>
  
  <p><strong>UPDATE</strong>
  So through suggestions from below, I was led to this site: <a href="http://www.fontspring.com/blog/further-hardening-of-the-bulletproof-syntax" rel="nofollow">http://www.fontspring.com/blog/further-hardening-of-the-bulletproof-syntax</a></p>
  
  <p>I used the CSS:</p>
  
  <pre><code>@font-face {
  font-family: 'BebasNeue';
  src: url('fonts/bebasneue.eot'); /* IE9 Compat Modes */
  src: url('fonts/bebasneue.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/bebasneue.woff') format('woff'), /* Modern Browsers */
       url('fonts/bebasneue.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('fonts/bebasneue.svg#svgBebasNeue') format('svg'); /* Legacy iOS */
  }
  </code></pre>
  
  <p>Then I went back to Font Squirrel, downloaded the kit fresh again, and renamed everything correctly, and it worked.</p>