Ipad Shenanigans: Keeping Your Font Weights Correct

I’ve run in to a weird little glitch with the Apple Ipad recently and would like to share my findings with all of you.

For some/most fonts, the Ipad can render the font weight a little wonky. For example, if you set a font-family like this:

.prometo { font-family:"prometo",helvetica,arial,sans-serif; }

Assuming you have the Prometo typekit set up for your site, you would see anything with the prometo class rendered as the Prometo font. The problem, at least for ipads, is that they seem to have trouble rendering font weights ( and possibly other aspects of a font ) without having a baseline set. In this particular instance I added the prometo class to an H3 tag that also has a font-weight of 300 applied to it (via the txt-light class):

<h3 class="prometo txt-light">Hello World!</h3>

On an Ipad it was rendering as bold even though I explicitly said that I want that element to be a light font-weight.

The solution was, and should be for all font-family declarations going forward, to set a base line font-weight and font-style in your declaration:

.prometo { font-family:"prometo",helvetica,arial,sans-serif; font-weight:normal; font-style:normal; }

Once that was in place, the font rendered correctly across all devices.

While I am sure there is more at work here than what I have explained, hopefully someone runs in to this post and it saves them a good amount of Googling!