The forums ran from 2008-2020 and are now closed and viewable here as an archive.

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

  • This topic is empty.
Viewing 15 posts - 1 through 15 (of 24 total)
  • Author
  • #31281

    I’m struggling to find a solution to this oddity. I’ve created headlines for the pages on my personal site ( 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’.
    (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?


    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.


    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.


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


    @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!


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


    Thanks so much!


    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.


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


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


    you are the man thank you!


    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?


    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


    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. Feel free to check it out and test it if you like :D


    Hi, this also worked for me.

    text-shadow: 0 0 0;
Viewing 15 posts - 1 through 15 (of 24 total)
  • The topic ‘[Solved] Weird mobile safari @font-face problem – font doubled & offset’ is closed to new replies.