CODEWITHSUNDEEP
htmlcssfonts
Alekh Shah
Alekh Shah

Reputation: 183

Cross browser Semibold font issue

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?

Upvotes: 13

Views: 3540

Answers (5)

Alekh Shah
Alekh Shah

Reputation: 183

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.

Upvotes: 3

Alias Varghese
Alias Varghese

Reputation: 2172

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

Upvotes: 1

godfrzero
godfrzero

Reputation: 2270

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.

Upvotes: 9

Bogdan Kuštan
Bogdan Kuštan

Reputation: 5577

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

Upvotes: 1

Thyrun
Thyrun

Reputation: 101

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.

Upvotes: 1

Related Questions