[Solved] Weird mobile safari @font-face problem – font doubled & offset

[Historical Forums User]

I’m struggling to find a solution to this oddity. I’ve created headlines for the pages on my personal site (meetaaronsilber.com) and have marked up and styled them as such;

<br />
<div class="headertext"><br />
<h1>Work & Play</h1><br />
<p>A special selection of creative work, ranging from branding and illustration to web design & development.</p><br />
</div><br />




<br />
.headertext {<br />
position: relative;<br />
<br />
display: block;<br />
margin: 0 auto;<br />
width: 830px;<br />
}<br />
<br />
.headertext h1 {<br />
color: #ADD9CE;<br />
font-family: TwCenMTRegular, 'Century Gothic', 'Trebuchet MS';<br />
font-size: 150px;<br />
text-shadow: 0 4px 0px rgba(28, 35, 36, 0.1);<br />
line-height: 105px;<br />
}<br />

I’m getting a weird rendering with mobile safari on an iPhone 4 running version 4.2.1. The font is doubled and then offset to the left. Its particularly visible with letters like ‘W’.

http://dl.dropbox.com/u/10847297/safarifontface.jpg
(yeah, so what if it’s rotated.. stop complaining, you get the idea)

Also, my @font-face css declarations are straight from font-squirrel, so nothing out of the ordinary there.

I can’t find a reference to this problem anywhere. Anyone have an idea of what’s going on?

[dhechler]

Aaron,
I’m seeing it too. Not too sure why it’s doing that. I haven’t run across to many @font-face problems with mobile safari.

[Historical Forums User]

Thanks – I was beginning to wonder if I was going nuts. It may just be me, but I this may have begun recently – after updating my device to 4.2.1. I’m usually pretty good about noticing the small things before launch.

[alltimelowe]

I’m getting the same problem on a current project. Have you come across a solution?

[Historical Forums User]

@alltimelowe – I’ve got a number of inquiries recently related to this problem – and so I thought I would sit down and try to knock this problem out. I’m glad to say there is a fix – and as far as I know, this is the first place its ever been documented – so here it goes;

Apparently many mobile devices (mobile safari included) style heading tags (h1-h6) with something like font-weight: bold. If the font you are using doesn’t include a bold weight, then the browser will create a faux bold and offset that. Yup – super ugly. What’s the remedy? You should be able to include this code either in your reset stylesheet or your style.css (or whatever);

h1, h2, h3, h4, h5, h6 { /*reset for mobile browsers */

font-weight: normal;

}

I’ve only had this issue with heading tags, so if anyone experiences this problem with another tag – please post! Mystery solved!

[DR2000]

That does it. Thank you very much for your time in finding the solution. Much appreciated.

[bpd]

Thanks so much!

[dep]

Thanks–this was driving me nuts! For what it’s worth, I didn’t get this solution to stick until I added “!important” to the reset.

[robtarr]

I’m glad I found this article – thank you. This one had me baffled.

[dfogge]

wow i had given up trying to figure this one out. good work, thanks aaron!

[dgotty]

you are the man thank you!

[brente]

Holy crap, that’s a great fix. Your CSS KungFu is powerful. Thank you so much. I was pounding my head for a few hrs already on this. How can I buy you a beer or delicious beverage of your choice?

[Historical Forums User]

Beers &/or Scotch may be mailed directly to my workplace. They may or may not be consumed in the order they are received.

Aaron Silber
521 Slack St.,
Charleston, WV 25301

[DJRavine]

wow.. very impressive.. been working on my works 3rd new website and it suffers from this issue as-well… but the ‘font-weight:normal;’ fix didnt work for my own test case…
the font is mostly un-noticeable, its mainly the phone number at the top-right of the site. http://www.printcentre.net.au/. Feel free to check it out and test it if you like :D

[timon]

Hi, this also worked for me.

text-shadow: 0 0 0;

[Author]

Posts