title: Text opacity changing font weight
body: <p>I'm using two Google fonts (Montserrat &amp; Bitter) for text content. Without changing opacity, the text is rendered far too heavily. However setting <code>opacity: .99</code> or lower displays the text in the assigned font-weight. Issue is visible in Chrome and Safari. </p>
  
  <p>Tried <code>-webkit-font-smoothing: antialiased;</code> though no change.</p>
  
  <p>Anyway to have the text display normally without the opacity property?</p>
  
  <p><a href="http://cl.ly/image/2f2V0h1R1r3H" rel="nofollow">http://cl.ly/image/2f2V0h1R1r3H</a></p>
  
  <pre><code>h1 {
  font-family: 'Montserrat', sans-serif;
  color: #FFFFFF;
  text-transform: uppercase;
  font-size: 1.7em;
  font-weight: 400;
  text-shadow: 0px 2px 6px black;
  line-height: 1.1em;
  -webkit-font-smoothing: antialiased;
  }
  
  p {
  font-family: 'Bitter', serif;
  color: #FFFFFF;
  font-size: 1em;
  font-weight: 400;
  text-shadow: 0px 2px 6px black;
  line-height: 1.2em;
  -webkit-font-smoothing: antialiased;
  }
  </code></pre>
  
  <p><a href="http://cl.ly/image/2s173l270z2S" rel="nofollow">http://cl.ly/image/2s173l270z2S</a></p>
  
  <pre><code>h1 {
  font-family: 'Montserrat', sans-serif;
  color: #FFFFFF;
  text-transform: uppercase;
  font-size: 1.7em;
  font-weight: 400;
  text-shadow: 0px 2px 6px black;
  line-height: 1.1em;
  opacity: .99;
  -webkit-font-smoothing: antialiased;
  }
  
  p {
  font-family: 'Bitter', serif;
  color: #FFFFFF;
  font-size: 1em;
  font-weight: 400;
  text-shadow: 0px 2px 6px black;
  line-height: 1.2em;
  opacity: .99;
  -webkit-font-smoothing: antialiased;
  }
  </code></pre>