title: CSS font difference in Firefox and Chrome
body: <p><a href="https://i.stack.imgur.com/haElD.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/haElD.png" alt="enter image description here"></a>I have issues with font difference in Firefox/Chrome.
  All the fonts seems bolder and bigger in Chrome than in Firefox, but I'd like to be like they are in Firefox.
  I tried to add different properties, but seems nothing really works.
  I'm using twitter bootstrap, so normalize.css is already included.
  Any ideas, why such a difference?</p>
  
  <p>I'm attaching photo, and here is the css used:</p>
  
  <pre><code>body{
    background-color: #f9f9f9;
    color: #555555;
    font-family: Arial,sans-serif;
    font-size: 14px;
    line-height: 1.42857;
    font-weight:400;
    font-size-adjust: 0.5;
    font-weight:400;
    -webkit-text-stroke: 0.7px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility; 
    -webkit-transform: translate3d(0px, 0px, 0px); 
  }
  
  h3 {
    font-family:"Lato",sans-serif;
    font-weight: 300;
    letter-spacing: normal;
    margin-bottom: 33px;
    word-spacing: 2px;
    font-size: 2.5em !important;
    line-height: 2 !important;
  }
  </code></pre>
  
  <p>and the imported font:</p>
  
  <pre><code>&lt;link href='https://fonts.googleapis.com/css?family=Lato:300,400,700' rel='stylesheet' type='text/css'&gt;
  </code></pre>
  
  <p>Here is the link, and attached image of how I see it on my browswers.</p>
  
  <p><a href="https://jsfiddle.net/sthAngels/kgnnnd6y/" rel="nofollow noreferrer">JSFiddle</a>
  <a href="https://i.stack.imgur.com/ASRbk.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ASRbk.png" alt="enter image description here"></a></p>