Cross browser Semibold font issue

Question

I am using font "Signika" for my web app. The design is provided in Adobe Illustrator files where they have used the font "Signika Semibold".

First method:

I applied font-family: Signika Semibold but it works as semi-bold only on Chrome. Firefox and IE display the text in normal font weight.

JS Fiddle

HTML

<p class="semi">
  Abcd Efgh
</p>    

CSS

.semi{
  font-family:'Signika Semibold';
  font-size:14px;
}

Second method:

I applied font-family: Signika and gave font-weight: 500 for semibold. However it appears as bold instead of Semibold on Chrome.

JS Fiddle

HTML

<p class="weight">
  Abcd Efgh
</p>    

CSS

.weight{
  font-family:'Signika';
  font-weight:500;
  font-size:14px;
}

Is there a workaround for fixing this issue?

Answer 1

Some screenshots would be awesome. Fonts do tend to appear heavier in Webkit browsers because they use sub-pixel antialiasing for font smoothing. Try setting -webkit-font-smoothing: antialiased; and it should start looking similar to how it looks in other browsers.

Have a look at this page for some more details.

There is a caveat to using this though: Generally, you should let the browser handle this. You'll notice that the MDN page mentions this is a non-standard feature.

If you're interested in how these different smoothing techniques produce different outputs, check this out.