The other day at work, we came up against a problem. Not the good type of problem where you have to choose between a chocolate fudge brownie smothered in hot sauce with vanilla ice cream, or a sticky toffee pudding dripping with saucy goodness... the other type of problem. The bad kind.

I had just created a website where we originally only had a .ttf (or .otf, I forget now) font file to work with. I headed over to the webfont generator at Fontsquirrel (great tool by the way, in case you've never heard of it) to upload that file and create all the web fonts to use in my font-face css.

Problem solved, you'd think... but no. At first, everything seemed hunky dory. The font was displaying beautifully, and changing certain parts of the text to use a heavier font weight (for bold, or strong styling) seemed to work perfectly. At least it did when viewing it on the desktop.

Viewing the website on the iPad was a whole different story! Frankly, the font looked rubbish. From a distance you could already see something wasn't quite right - it looked almost blurry, or distorted. But when you got up close and personal with the screen, it became evident exactly what was happening, and the letter "C" was the clearest indicator. It was as if there was actually two letters in the space of one. One had just been offset slightly to the side. It was immediately obvious that's why the text looked so terrible.

What do you even Google for a problem like that?! "Text displaying double", "Eyes gone blurry, seeing double"?! Many frustrating searches later, I happened across an article which filled me with hope.

Apparently the reason for this happening is the browser attempting to compensate for the lack of the font weight it needs. If you specify a bold font weight in your css, and your web font css doesn't have a bold version - rather than do nothing, the iOS browser tries to get clever. If it doesn't have a bold version available, it will duplicate the text and offset it as if to appear bold.

The Solution

You need to create webfont files for both the normal version and the bold version of the font, and then refer to each of them using a separate font-face declaration - but with the same name. For example:

    

@font-face {
	font-family: 'Joker';
	src: url('joker.eot');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'Joker';
	src: url('joker-bold.eot');
	font-weight: bold;
	font-style: normal;
}

body {
	font-family: Joker, arial, sans-serif;
}

There are two separate .eot files, joker.eot is the normal version of the font, joker-bold.eot is the bold version. Each one gets referenced in its own @font-face declaration, but both declarations have the same name of "Joker".

As a result, when the font-family of Joker is applied to body (or any other element for that matter), both the normal font weight and bold font weight will be available.