title: OSX Safari VS Chrome font rendering difference
body: <p>I have a text element with the follow CSS rules: </p>
  
  <pre><code>box-sizing:border-box;
  color:rgb(38, 38, 38);
  display:block;
  float:left;
  font-family:Brandon, sans-serif;
  font-size:14px;
  font-weight:700;
  height:20px;
  line-height:16.8px;
  list-style-image:none;
  list-style-position:outside;
  list-style-type:none;
  position:relative;
  text-align:left;
  text-size-adjust:100%;
  visibility:visible;
  -webkit-tap-highlight-color:rgba(0, 0, 0, 0);
  </code></pre>
  
  <p>My question/problem is that while the rendered element width is pretty constant across browsers (between 146.50px and 150px) on Safari it's up to 165px almost 10% extra compared to all other browsers. Since I have a few elements in a row this difference makes the whole design not fit on Safari...</p>
  
  <p>I have tried all kind of tricks like:
   - <code>letter-spacing</code>, <code>word-spacing</code> </p>
  
  <p>Everything suggested here: <a href="https://stackoverflow.com/questions/31056543/safari-font-rendering-issues">Safari font rendering issues</a></p>
  
  <p>But I cannot find any solution. I have tested the design in:
   - Firefox (Windows and Mac), Internet Explorer, Edge, Chrome (Both windows and mac) and the result is more or less constant. Chrome Mac vs Windows have a difference of about 1 pixel.</p>
  
  <p>What is the reason that Safari makes the item so much wider and better yet is there a way to normalize this across browsers (without setting a fixed width of course)</p>
  
  <p><strong>Edit</strong></p>
  
  <pre><code>@font-face {
   font-family: "Brandon";
   font-style: normal;
   font-weight: normal;
   src: url("../fonts/Brandon_reg.otf") format("opentype");
   }
  </code></pre>