1

I have a text element with the follow CSS rules: 

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);

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...

I have tried all kind of tricks like: - letter-spacing, word-spacing

Everything suggested here: Safari font rendering issues

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.

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)

Edit

@font-face {
 font-family: "Brandon";
 font-style: normal;
 font-weight: normal;
 src: url("../fonts/Brandon_reg.otf") format("opentype");
 }
Emil Borconi
  • 3,326
  • 2
  • 24
  • 40

1 Answers1

6

Two possibilities at first glance:

  1. The otf format is not supported by Safari
  2. There's no bold or 700 version of font Brandon provided, browsers try to mimic the bold version, which may vary in the rendering result. You may try to disable it by adding font-synthesis: none to text or providing the bold version of your font.
李骏骁
  • 571
  • 5
  • 13
  • I can see logic in it, I will give it a try and get back to you. Thanks. – Emil Borconi Feb 26 '18 at 08:55
  • Sorry for the late answer I have been busy with other work. Finally got my head around it and tested it. Indeed either loading the bold version or by adding `font-synthesis: none` solved the problem. Thanks a lot. – Emil Borconi Mar 01 '18 at 09:37
  • @EmilBorconi You're welcome, glad to know that works – 李骏骁 Mar 01 '18 at 09:55