title: Font Weight (incorrectly) Lighter in Mac Safari Only
body: <p><strong>This problem exists ONLY on Mac Safari</strong>.<br>
  Other browsers / other OS works properly.</p>
  
  <p>The problem:
  Observe the font weight of the top navigation here: <a href="http://www.octa.com" rel="nofollow">http://www.octa.com</a> (WordPress)</p>
  
  <p>Then observe the font weight of the top navigation here: <a href="http://www.octa.com/products" rel="nofollow">http://www.octa.com/products</a> (Magento)</p>
  
  <p><em>Note</em> that while they are served by different code (WP vs Magento), the css is nearly identical between the two pages.</p>
  
  <p>Here's the relevant bits of the css:</p>
  
  <pre><code>nav.menu li a {
      font-family: 'VegurLight','Myriad Pro',Arial,Helvetica,Sans-Serif;
      font-size: 20px;
      text-align: left;
  }
  
  nav.menu li a, #subnavwrapper nav li a {
      color: #FFFFFF;
      font-weight: normal;
      height: 50px;
      line-height: 50px;
      padding: 0 46px 0 0;
  }
  
  nav li a {
      display: block;
      line-height: 1em;
      text-decoration: none;
  }
  
  body {
      color: #000000;
      font-family: "Lucida Grande","Lucida Sans Unicode",Helvetica,Arial,Verdana,sans-    serif;
      font-size: 14px;
      line-height: 1.55em;
      text-align: center;
      background: black;
  }
  </code></pre>
  
  <p>Note that the font is imported using @font-face.</p>
  
  <p>I've tried everything - many answers here on SO and other articles. Note that <strong>none</strong> of the below styles gleaned from other answers / resources corrected the font display.</p>
  
  <pre><code>font-variant:normal;
  -webkit-font-smoothing: antialiased;
  text-shadow: rgba(0, 0, 0, .01) 0 0 1px;
  </code></pre>