Cross browser Semibold font issue

13
votes

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?

5
htmlcssfonts
Your fiddle doesn't include a reference to the actual font, but a pretty safe way to make sure which font is actually loaded in each browser is to check the console/network stats for the applied CSS font – it should make clearer which style is applied than the different rendering/fallback engines of each browser. – Paracetamol

5 Answers

9
votes

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.

3
votes

SOLUTION

Used google fonts with required styles:Normal(400), semi-bold(600), bold(700))

Link of Google Font

Imported the font by including this code in HEAD section of HTML

<link href='https://fonts.googleapis.com/css?family=Signika:700,400,600' rel='stylesheet' type='text/css'>

Then in CSS,

For Normal

font-weight:400;

For Semi-bold

font-weight:600;

For Bold

font-weight:700;

By using this method, fonts on all browsers look alike.

1
votes

Actually, your second JSFiddle had:

font-weight: 600;

Instead of 500. Here's your fiddle updated.

http://jsfiddle.net/gbj7b1jp/1/

Now it's not bold.

1
votes

Semibold usaly is font-weight:400;

However You scan specify Your font properties when importing fonts with @font-face:

@font-face {
    font-family: Signika;
    src: url(SignikaLight.otf);
    font-style: normal;
    font-weight: 100;
}

@font-face {
    font-family: Signika;
    src: url(SignikaRegular.otf);
    font-style: normal;
    font-weight: 300;
}

@font-face {
    font-family: Signika;
    src: url(SignikaSemibold.otf);
    font-style: normal;
    font-weight: 400;
}

@font-face {
    font-family: Signika;
    src: url(SignikaBold.otf);
    font-style: normal;
    font-weight: 600;
}
1
votes

This is a known issue in CSS. Web browsers have been poor at implementing font weights by the book: they largely cannot find the specific weight version, except bold. The workaround is to include the information in the font family name, even though this is not how things are supposed to work. You can have a look on this link(only runs in IE) and identify the best match of font style from the list is the easy hack to this problem. http://www.cs.tut.fi/~jkorpela/listfonts.html