The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "Implementing an SVG Icon System" Nov 30 - 6:00 PM Eastern

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

  • # January 17, 2011 at 12:35 pm

    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?

    # January 17, 2011 at 4:10 pm

    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.

    # January 17, 2011 at 8:03 pm

    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.

    # April 7, 2011 at 10:58 am

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

    # April 7, 2011 at 2:54 pm

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

    # August 17, 2011 at 12:53 am

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

    # October 27, 2011 at 10:05 am

    Thanks so much!

    # February 12, 2012 at 12:01 am

    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.

    # February 15, 2012 at 3:04 pm

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

    # February 15, 2012 at 3:37 pm

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

    # March 22, 2012 at 4:39 pm

    you are the man thank you!

    # March 26, 2012 at 11:40 am

    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?

    # March 27, 2012 at 3:04 pm

    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

    # April 4, 2012 at 2:05 am

    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

    # June 11, 2012 at 8:23 pm

    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.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed