CODEWITHSUNDEEP
ioscssios7ios8font-family
keldar
keldar

Reputation: 6252

CSS font-family HelveticaNeue-Light not rendering bold

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.

Upvotes: 1

Views: 3257

Answers (1)

Erkki Teedla
Erkki Teedla

Reputation: 319

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.

Upvotes: 1

Related Questions