[Jonathan HParticipant]

If you view my site in Firefox the fonts and icons are generally a lot heavier.

They are the same as in Safari which I use most of the time, but just bolder.

site – drive.co.uk

Thanks

[ZeshanMember]

Hi Jonathan,

Thanks for writing in!

Please add following CSS under Custom > CSS in the Customizer:

body {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
}

Hope this helps. 🙂

Thank you.

[Jonathan HParticipant]

No I have tried this and it is still noticeably bolder. All the social logos are filled in and furry looking.

Any more ideas?

Thanks

[Nabeel AModerator]

Hi Jonathan,

This could be due to the font you’re using on your site. Browsers render the fonts differently. Can you please change the font to default or any other font and then check the site again.

Let us know how this goes!

[Jonathan HParticipant]

Sorry, don’t agree, it can’t be the font as it affects all of them including the Font awesome icon font which is in all the headlines and social icons, which are also emboldened.

I have been with the X font since almost day one and have told many about the X theme. This has always been an issue. I also notice it is the same in Chrome browser.

Do you have a system with safari, firefox and chrome, it is easy to see the difference.

Thanks for your help.

[CharliePryorParticipant]

Cannot replicate this issue on my site. I see no differences in fonts between all three browsers from my site.

Image below (from left to right) is Safari, Chrome, and Firefox. All latest versions of browsers, latest version of all plugins and of X, and on the latest version of Mac OS X Yosemite.

– Charlie

[Rue NelModerator]

Hello There,

We’ve compared your site on different browsers namely, Chrome, Safari and Firefox. We only notice a slight difference on Safari and not in Firefox. The font weights are the same on Chrome and Firefox.

Could you give us a screenshot so that we can compare it in our end?

Thank you very much.

[Jonathan HParticipant]

This reply has been marked as private.

[ChristopherModerator]

Hi there,

Please upload your screen shots in prntscr.com and send us generated URL.

Thanks.

[Jonathan HParticipant]

This reply has been marked as private.

[RadModerator]

Hi Jonathan,

You’re right. In MAC Safari, the font is exactly as rendered here https://www.google.com/fonts/specimen/Nixie+One (normal:400)
https://www.google.com/fonts#UsePlace:use/Collection:Nixie+One

And even if you try these url on chrome and firefox, they are also thin. Which means this issue is only particular to your setup.

I spent time checking the coding if there is any different and they are identical. Do you have any idea when this started? Maybe there is a clue why this happens. I even tried on my local installation and it’s just okay.

(Firefox and Chrome)

Could you try disabling all other plugins, and temporary remove your customization? If that solve the problem, then you can put them one by one and find what’s causing it.

Thanks.

[Jonathan HParticipant]

This reply has been marked as private.

[ChristopherModerator]

Hi there,

Please add the following CSS under Customize -> Custom -> CSS :

.x-social-global i,a.x-brand.text{
  opacity: 0.99;
}

Hope it helps.

[Author]

Posts