title: Custom Symbol Font not displayed in IE
body: <p>The following setup</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;!DOCTYPE html
  SYSTEM "about:legacy-compat"&gt;
  &lt;html&gt;
      &lt;head&gt;
      &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"&gt;
      &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;title&gt;SymbolTest&lt;/title&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"&gt;
      &lt;meta name="HandheldFriendly" content="true"&gt;
      &lt;meta http-equiv="cleartype" content="on"&gt;
      &lt;link rel="stylesheet" type="text/css" href="css/style.css"&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;span class="greek"&gt;μ ω Ω ≥ ⊗ ↔  ± √ ≠ ♦ ♥ ♠ ⇐ ⇒ ⊥ ♦ ⊆ ∅&lt;/span&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>@font-face {
    font-family: Symbol;
    src: url("../fonts/Symbol/symbol.eot");
    src: url("../fonts/Symbol/symbol.eot?#iefix") format("embedded-opentype"), url("../fonts/Symbol/symbol.woff2") format("woff2"), url("../fonts/Symbol/symbol.woff") format("woff"), url("../fonts/Symbol/symbol.ttf") format("truetype"), url("../fonts/Symbol/symbol#symbolregularregular") format("svg");
    font-weight: normal;
    font-style: normal;
  }
  span.greek {
    font-family: Symbol;
  }
  </code></pre>
  
  <p>Produces very weird results in Internet Explorer compared to other browsers;</p>
  
  <p><strong>Crome, Local</strong></p>
  
  <p><img src="https://i.stack.imgur.com/tSjaW.png" alt="Chrome, Local"></p>
  
  <p><strong>Chrome, Server</strong></p>
  
  <p><img src="https://i.stack.imgur.com/z3COG.png" alt="Chrome, Server"></p>
  
  <p><strong>FF, Local</strong></p>
  
  <p><img src="https://i.stack.imgur.com/Q2Ivj.png" alt="FF, Local"></p>
  
  <p><strong>FF, Server</strong></p>
  
  <p><img src="https://i.stack.imgur.com/LHx4m.png" alt="FF, Server"></p>
  
  <p><strong>IE10, Local</strong></p>
  
  <p><img src="https://i.stack.imgur.com/53tcR.png" alt="IE10, Local"></p>
  
  <p><strong>IE10, Server</strong></p>
  
  <p><img src="https://i.stack.imgur.com/l6Dyc.png" alt="IE10, Server"></p>
  
  <p><strong>IE11, Local</strong></p>
  
  <p>Asks me wether I want to allow ActiveX components - Note that in the background, the font used is the default windows Symbol font...</p>
  
  <p><img src="https://i.stack.imgur.com/z4ocM.png" alt="IE11, Local, Before"></p>
  
  <p>After clicking "accept", it changes to</p>
  
  <p><img src="https://i.stack.imgur.com/21R8F.png" alt="IE11, Local, After"></p>
  
  <p>What is going on here? I created the font using FontSquirrel and used the "<em>bulletproof</em>" <code>@font-face</code> syntax, but it's still not working as expected...?</p>