CSS font-family HelveticaNeue-Light not rendering bold

Question

I am having a headache getting iOS 7/8 to render my fonts properly. It appears iOS does not know how to render the bold variant of Helvetica Neue Light (HelveticaNeue-Light/HelveticaNeue-Bold).

E.g. I have the following CSS selectors:

body {
    font-family: "HelveticaNeue-Light";
}

h1 {
    font-weight: bold;
}

h2 {
    font-weight: 600;
}

And my markup:

<li>
    <h1>A. Crimson Tide UK (Enabled Customer - UK Depot)</h1>
    <h2>1-14</h2>
    <h2>10:00 - 11:00</h2>
    <p>0914 Desc</p>
</li>

And whenever I have a h1 tag, iOS seems to render Helvetica Neue Condensed Bold (HelveticaNeue-CondensedBold) - not Helvetica Neue Bold (HelveticaNeue-Bold).

Here is a screenshot of my webpage:

iOS Font Issue

Why is it rendering the Helvetica Neue Condensed Bold and not Helvetica Bold - I have not set Condensed anywhere in my CSS!

If I set the h1 font-weight to 900, it renders in Helvetica Neue, and it is slightly bold, but not the weighting I would like.

If somebody can shed some light on this it would be greatly appreciated.

Thank you in advanced.

HelveticaNeue-Light don't have a bold version... try to use for h1 font-family: "HelveticaNeue-Bold"; instead just bold iosfonts.com — TonyMkenu
Thanks! Could you change this to an answer and explain why I can't do: font-family: "HelveticaNeue" and explain why I can't use various font-weights to make the text lighter/bolder (as it seems to work if I set font-weight bolder, but not lighter). As it's the answer I need but I can't reward it an answer yet :) — keldar
If you have got the answer, please post it as an answer.... I'm not so good at CSS :)) — TonyMkenu

Erkki Teedla Erkki Teedla · Accepted Answer · 2015-02-21T12:34:31

I overcame this issue by defining HelveticaNeue font face and then specified weights and pointed them to respective local font files like this:

@font-face {
    font-family: "HelveticaNeue";
    font-weight: 100;
    src: local("Helvetica Neue Thin"),
    local("HelveticaNeue-Thin");
}

@font-face {
    font-family: "HelveticaNeue";
    font-weight: 300;
    src: local("Helvetica Neue Light"),
    local("HelveticaNeue-Light");
}

@font-face {
    font-family: "HelveticaNeue";
    font-weight: normal;
    src: local("Helvetica Neue"),
    local("HelveticaNeue");
}

@font-face {
    font-family: "HelveticaNeue";
    font-weight: bold;
    src: local("Helvetica Neue Bold"),
    local("HelveticaNeue-Bold");
}

And then just assigned as the preferred font family and weight for the body:

body {
    font-family: HelveticaNeue, Helvetica, Arial, Verdana, sans-serif;
    font-weight: 300;
}

This way, all the weights are at my control - the bold never becomes condensed bold, it remains bold.

Coming back to why iOS8 does that... don't know.

CSS font-family HelveticaNeue-Light not rendering bold

1 Answers