title: Safari bolding a light @font-face font on hover
body: <p>For some reason Safari is bolding my light @font-face font during transitions. </p>
  
  <p>When you hover over the product images, you can see safari adding boldness to the text after a split second:</p>
  
  <p><a href="http://fine-grain-2.myshopify.com" rel="nofollow">http://fine-grain-2.myshopify.com</a></p>
  
  <p>Here are my @font-face declarations:</p>
  
  <pre><code>@font-face {
  font-family: Avenir;
  font-weight: normal;
  font-style: normal;
  src: url("AvenirLTStd-Medium.otf") format("opentype");
  }
  
  @font-face {
  font-family: AvenirBold;
  font-weight: normal;
  font-style: normal;
  src: url("AvenirLTStd-Black.otf") format("opentype");
  }
  
  @font-face {
  font-family: AvenirLight;
  font-weight: lighter;
  font-style: normal;
  src: url("AvenirLTStd-Light.otf") format("opentype");
  }
  </code></pre>
  
  <p>Here is where I declare the font-family in the main CSS:</p>
  
  <pre><code>body {
      background: none repeat scroll 0 0 #999999;
      font-family: AvenirLight;
      font-weight: lighter;
  }
  </code></pre>