title: How to prevent different browsers rendering fonts differently?
body: <p>I have an issue with trying to maintain a constant font style across all browsers. As seen below, safari's font rendering system makes the font weight smaller than the font weight of chrome's.</p>
  
  <p><strong>Safari:</strong>
  <img src="https://i.stack.imgur.com/hCZ8n.png" alt="Safari"></p>
  
  <p><strong>Chrome:</strong>
  <img src="https://i.stack.imgur.com/t7L7u.png" alt="Chrome"></p>
  
  <p>I've tried using the solutions found on other questions though they have not solved this issue. How can I maintain a constant font style across all the major browsers? That is Chrome, Safari, Opera, Firefox and Internet Explorer.</p>
  
  <p><strong>Here is what I have tried.</strong></p>
  
  <ol>
  <li><p><code>-webkit-font-smoothing: antialiased;</code></p></li>
  <li><p><code>font-weight: 800;</code></p></li>
  <li><p><code>text-rendering: optimizeLegibility;</code></p></li>
  </ol>