htmlcsszeplin

Display fonts in different browsers

There is a design drawn in Zepplin. There is a font

font-family: HelveticaNeue;
font-size: 16px;
font-weight: 500;
font-style: normal;
font-stretch: normal;
line-height: 1.5;
letter-spacing: normal;
color: #888888;

But for some reason in the browser it is displayed much thinner than in design. What could be the problem?

In the picture the design below the browser at the top: in the picture the design below the browser at the top

Solution

  • here you hape put the font-weight property just put the value to 600 like below

    font-weight: 600;

    the reason behind that is when we put font-weight below 600 it shows the text normal, while if we put the font-weight between 600-900 it shows the weighted text