[kirk74Participant]

I am on a MAC – any ideas why this is and what CSS to use to just fix the lightness in Safari but not make it bolder in the other browsers?

Here is the site: http://27.121.66.4/~abab6919/wordpress/

Thx so much

[ZeshanMember]

Hi there,

Thanks for writing in!

Just checked your website on both Chrome and Safari on Mac, on Safari, the font is a bit bolder than on Chrome. Do you wish to make the font lighter on Safari (similar to Chrome)? If so, please use following CSS code under Custom > CSS in the Customizer:

body {
   -webkit-font-smoothing: antialiased;
}

Hope this helps. 🙂

Thank you.

[kirk74Participant]

I’m sorry, I wasn’t very clear then!

What I am specifically referring to is the sub menus on the homepage (that pop up horizontally) on MAC SAFARI – they are markedly lighter in weight than they are on the main pages in MAC SAFARI.

On the other MAC browsers, the font weight for submenus is the same in homepage and inside pages.

Can you explain why it would be different on MAC SAFARI on the homepage to the other pages? And what CSS code I code use to make it consistent?

Thx so much.

[ChristopherModerator]

Hi there,

Please try this :

.desktop .sub-menu a{
font-weight:400;
}

Hope that helps.

[kirk74Participant]

Thx.. that CSS makes all the submenu fonts thicker overall – but there is still the difference in MAC SAFARI homepage only – IE – with the CSS, MAC SAFARI homepage submenu font becomes normal looking but n all the other scenarios.

It just seems so strange that Safari would make the font noticeable lighter on the homepage than the other pages, when it is the the same CSS that is being used??

It s like the default weighting on SAFARI is naturally rendering thinner than the other browsers. EXCEPT strange because it is only on the homepage.

If you provide an email I can email you screenshots to clearly show what I am talking about??

Thx

[Rue NelModerator]

Hello There,

To make your font consistent in Safari, please try this code in your customizer.

.desktop .sub-menu a {
    -webkit-font-smoothing: subpixel-antialiased; /* antialiased | subpixel-antialiased | none */
}

You can use body if you want to apply this to the whole page elements. You might be interested in this: http://usabilitypost.com/2010/08/26/font-smoothing/

Hope this helps.

[kirk74Participant]

Thx so much

[NicoModerator]

You’re most welcome.

Have a great day! 🙂

[Author]

Posts