title: 'Segoe UI' font with font-face & local
body: <p>I want to use the "Segoe UI" font in a website if it is installed in the user's computer.</p>
  
  <p>I have declared all the styles with <code>@font-face</code> in order to use the <code>font-weight</code> property to change the thickness of the font (it's a really cool feature!).</p>
  
  <p>The problem is that I cannot do it work with <strong>Segoe UI Bold</strong> (I think the name is wrong). Any idea?</p>
  
  <p>Here an example. (4) and (5) would be the same: <a href="http://jsfiddle.net/kxHQR/1/" rel="noreferrer">http://jsfiddle.net/kxHQR/1/</a></p>
  
  <hr>
  
  <pre class="lang-css prettyprint-override"><code>@font-face {
    font-family: 'Myname';
    font-style: normal;
    font-weight: 700;
    src: local('Segoe UI Bold'), local('SegoeUI-bold'), local('segoeuib');
  }
  @font-face {
    font-family: 'Myname';
    font-style: normal;
    font-weight: 600;
    src: local('Segoe UI Semibold'), local('SegoeUI-Semibold');
  }
  @font-face {
    font-family: 'Myname';
    font-style: normal;
    font-weight: 400;
    src: local('Segoe UI'), local('SegoeUI');
  }
  @font-face {
    font-family: 'Myname';
    font-style: normal;
    font-weight: 300;
    src: local('Segoe UI Light'), local('SegoeUI-Light');
  }
  
  /* ... */
  
  BODY {
   font-family: 'Myname';    
  }
  
  .boldtext {
      font-family:'Segoe UI';
      font-weight:700;
  }
  </code></pre>
  
  <pre class="lang-html prettyprint-override"><code>&lt;p style='font-weight:300'&gt;1. Text with font-weight:300. OK&lt;/h1&gt;
  &lt;p&gt;2. Here is normal text. OK&lt;/p&gt;
  &lt;p style='font-weight:600'&gt;3. Text with font-weight:600.  OK&lt;/p&gt; 
  &lt;p style='font-weight:700' &gt;4. Text with font-weight:700. It must be like (5), but it is like (3). :(&lt;/p&gt;
  &lt;p class='boldtext'&gt;5. Text with font-family:'Segoe UI' (no font-face) and font-weight:700; &lt;/p&gt; 
  </code></pre>