CODEWITHSUNDEEP
cssmacosfontssafarifont-face
random_user_name
random_user_name

Reputation: 26150

Font Weight (incorrectly) Lighter in Mac Safari Only

This problem exists ONLY on Mac Safari.
Other browsers / other OS works properly.

The problem: Observe the font weight of the top navigation here: http://www.octa.com (WordPress)

Then observe the font weight of the top navigation here: http://www.octa.com/products (Magento)

Note that while they are served by different code (WP vs Magento), the css is nearly identical between the two pages.

Here's the relevant bits of the css:

nav.menu li a {
    font-family: 'VegurLight','Myriad Pro',Arial,Helvetica,Sans-Serif;
    font-size: 20px;
    text-align: left;
}

nav.menu li a, #subnavwrapper nav li a {
    color: #FFFFFF;
    font-weight: normal;
    height: 50px;
    line-height: 50px;
    padding: 0 46px 0 0;
}

nav li a {
    display: block;
    line-height: 1em;
    text-decoration: none;
}

body {
    color: #000000;
    font-family: "Lucida Grande","Lucida Sans Unicode",Helvetica,Arial,Verdana,sans-    serif;
    font-size: 14px;
    line-height: 1.55em;
    text-align: center;
    background: black;
}

Note that the font is imported using @font-face.

I've tried everything - many answers here on SO and other articles. Note that none of the below styles gleaned from other answers / resources corrected the font display.

font-variant:normal;
-webkit-font-smoothing: antialiased;
text-shadow: rgba(0, 0, 0, .01) 0 0 1px;

Upvotes: 1

Views: 4979

Answers (3)

Paul Walsh
Paul Walsh

Reputation: 21

(I cannot post comments so I can only add my findings to the conversation by posting.)

I have found that text in fixed position elements appears lighter weight than other types of positioning in Safari. Therefore could not be ignored as suggested in other places.

Adding --webkit-font-smoothing: antialiased does solve this , but then it looks lighter than in Firefox. Which can be fixed with -moz-osx-font-smoothing: grayscale

fiddle here to show the problem - Safari only

Upvotes: 1

toakleaf
toakleaf

Reputation: 1229

Try -webkit-font-smoothing: antialiased;

I've found that this simple change made Safari's font-weight property much more reliable.

Upvotes: 1

random_user_name
random_user_name

Reputation: 26150

With the comments / prodding from @JukkaK.Korpela, I discovered a few things:

First, the root of the problem is this:

-webkit-backface-visibility: hidden;

Which was added to the code to solve an animation problem per this answer: iPhone WebKit CSS animations cause flicker

Don't know how to solve the font and solve the flicker, but I can at least choose which one to solve now.

Second, as an avid Firefox/Firebug user, I had tried using Firebug Lite in Safari, as well as another extension for Safari, and they did not work. So, for all of you out there who may be trying to troubleshoot Safari-only issues, here's a big tip:

Safari's "Develop" tool. Didn't know about it at all until I did some searching today, but it's a menu item in the toolbar. If you don't see it, then go to Preferences->Advanced, and check the "Show Develop Menu in Toolbar"

With that tool, I was able to troubleshoot and solve this quickly.

Upvotes: 0

Related Questions