Text rendering as bold on mac in web browsers


I've got a problem with text on a website . When viewing it on a Mac in Firefox or Safari or other browsers it appears to render text as bold (even though it will go bolder with font-weight: bold; ).

Can this be fixed? I've tried putting font-weight: normal !important in my CSS but seems to have no effect.


Heres a link to the site if you'd like to check your yourselves.
Who is Participating?
Eoin OSullivanConnect With a Mentor ConsultantCommented:
The problem/issue is that you've used a font-family that differes between Mac & Windows
See your master.css
In the body tag you have specified
body {
      background-color : #303030;
      font-family: Helvetica, Arial, sans-serif;
      color: #fff;

Helvetica is a Mac-only font and more heavily aliased and slightly rounder than Arial ..
So on a Windows PC you are looking at Arial and on a Mac you are looking at Helvetica .. hence the difference.
Try removing Helvetica from the font-family for a more consistent appearance!!

Change it to ..

body {
      background-color : #303030;
      font-family: Arial, sans-serif;
      color: #fff;
I don't have a mac in front of me, but I'm guessing that what you're seeing is caused by the anti-aliasing on a mac.  By default, Windows doesn't have anti-aliasing, but Macs do.

Try enabling "ClearType" in Windows, and see if it makes the text look more like the Mac. (http://support.microsoft.com/kb/306527)

If they look the same or similar, then there really isn't a problem with your css.  It's something that you can't really do anything about.

If they still look drastically different, then I'm not sure what you could do.  I'd probably have to see your html and css to help you more.
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.