Forums

aaronsilber

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;


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


        .headertext {
            position: relative;
            
            display: block;
            margin: 0 auto;
            width: 830px;
        }

            .headertext h1 {
                color: #ADD9CE;
                font-family: TwCenMTRegular, 'Century Gothic', 'Trebuchet MS';
                font-size: 150px;
                text-shadow: 0 4px 0px rgba(28, 35, 36, 0.1);
                line-height: 105px;
            }

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.

aaronsilber

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?

aaronsilber

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

aaronsilber

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;

koenahn

Thank you! I had totally forgotten that headings are bold by default! :) Added font-weight:normal to my css under *{} and it looks GREAT. Thanks a bunch! :)

willdobson

After wasting hours trying to figure this issue out, I finally found this thread. So thank you so much, Aaron... You've made a real difference to my life!!

samuelclarke

Awesome, thanks for this fix!

jaitly

hello

anthonyh

The suggestions above didn't work for me. Adding !important did the trick:

* { font-weight: normal!important; }

danielfurzeface

Ahhhh thanks so much! The simple solutions are the best!

treehouse : what would you like to learn today?

Forums

[Solved] Weird mobile safari @font-face problem - font doubled and offset to the left.