title: Ligatures (and fonts) in IE10
body: <p>I'm having a problem with the following code displaying correctly in IE10.  I'm comfortable with the fact that it won't be able to work in IE9&lt; but according to caniuse.com ligatures (and true type) should be functioning as expected in IE10.  Is there a special rule that's required to make this work?</p>
  
  <p>Here's the Relevant HTML:</p>
  
  <pre><code>&lt;body&gt;
  &lt;nav role = "navigation" class = "nav"&gt; 
    &lt;ul&gt;
    &lt;li&gt;
      &lt;a href="#branches"  class="selected"&gt;home&lt;/a&gt;
    &lt;/li&gt;
    &lt;li &gt;
      &lt;a href="#trees"&gt;mobile&lt;/a&gt;
    &lt;/li&gt;
    &lt;li&gt;
      &lt;a href="#path"&gt;portfolio&lt;/a&gt;
   &lt;/li&gt;&lt;/li&gt;
   &lt;li&gt;&lt;
     a href="#power"&gt;power&lt;/a&gt;
   &lt;/li&gt;
  &lt;/ul&gt; 
  &lt;/nav&gt; 
  </code></pre>
  
  <p>And here's the CSS: </p>
  
  <pre><code>@font-face {
    font-family: "ui";
    src: url("../fonts/Live-Share-UI.eot");
    src: url("../fonts/Live-Share-UI.svg") format("svg");
    src: url("../fonts/Live-Share-UI.ttf");
    font-feature-settings: "dlig" 1; }
  
  
  .nav, .header {
    font-family: ui;
    position: fixed;
    text-align: center;
    z-index: 50;
    top: 0;
    bottom: 0;
    left: 0;
    margin: auto auto 1em auto;
    right: 0;
    height: 1.5em; }
  </code></pre>
  
  <p>This is an excerpt from a larger project which can be seen at <a href="http://live_share_test.aws.af.cm" rel="nofollow">live_share_test.aws.af.cm</a></p>
  
  <p>This is currently working with  Chrome Version 27.0.1453.94 m, Opera v 12, Firefox 19.0.2  on Windows as well as a current install of Safari on iPhone 4. </p>