Grow your CSS skills. Land your dream job.

[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 (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?

    # January 17, 2011 at 4:10 pm

    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.

    # 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.

    bpd
    # October 27, 2011 at 10:05 am

    Thanks so much!

    dep
    # 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. http://www.printcentre.net.au/. 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.

*May or may not contain any actual "CSS" or "Tricks".