title: How do I apply a css font-weight transition with a font-face rule
body: <p>I'm struggling to get my font-weight transition to apply - Is this actually possible when I'm defining my font using a font-face rule?</p>
  
  <pre><code>@font-face {
      font-family: 'HelveticaNeue';
      src: url('fonts/275542_0_0.eot');
      src: url('fonts/275542_0_0.eot?#iefix') format('embedded-opentype'),
          url('fonts/275542_0_0.woff') format('woff'),
          url('fonts/275542_0_0.ttf') format('truetype');
      font-weight: bold;
      font-style: normal;
  }
  
  
  @font-face {
      font-family: 'HelveticaNeue';
      src: url('fonts/275542_1_0.eot');
      src: url('fonts/275542_1_0.eot?#iefix') format('embedded-opentype'),
          url('fonts/275542_1_0.woff') format('woff'),
          url('fonts/275542_1_0.ttf') format('truetype');
      font-weight: normal;
      font-style: normal;
  }
  
  ul.site_menu &gt; li {
      font-family: HelveticaNeue;
      font-weight: 400;
      font-size: 160%;
      padding: 6px;
      display: inline;
      text-align: center;
      cursor: pointer;
      -moz-transition:color 0.5s, font-weight 0.5s;
      -webkit-transition: color 0.5s, font-weight 0.5s;
      -o-transition: color 0.5s, font-weight 0.5s;
      transition: color 0.5s, font-weight 0.5s;
  }
  
  ul.site_menu &gt; li:hover {
      color: #333;
      font-weight: 700;
      -moz-transition:color 0.5s, font-weight 0.5s;
      -webkit-transition: color 0.5s, font-family 0.5s;
      -o-transition: color 0.5s, font-weight 0.5s;
      transition: color 0.5s, font-weight 0.5s;
  }
  </code></pre>
  
  <p>The color transition seems to work fine, but there's no transition on the font-weight property (it's instantaneous).</p>