Skip to main content

Forums

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

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

    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?

    #65509
    dhechler
    Member

    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.

    #65513
    aaronsilber
    Participant

    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.

    #51849
    alltimelowe
    Participant

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

    #51866
    aaronsilber
    Participant

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

    #85112
    DR2000
    Member

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

    #89751
    bpd
    Member

    Thanks so much!

    #96569
    dep
    Member

    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.

    #96757
    robtarr
    Member

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

    #96760
    dfogge
    Participant

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

    #99714
    dgotty
    Member

    you are the man thank you!

    #99944
    brente
    Member

    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?

    #100073
    aaronsilber
    Participant

    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

    #100562
    DJRavine
    Member

    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

    #104252
    timon
    Member

    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.