PT Sans font displays different on Mac and PC

theideabulb
theideabulb used Ask the Experts™
on
I am trying to display the font PT Sans the same in browsers.  Right now it looks totally different on PC than on a Mac.  I understand there could be slight variation, but to me it looks like PC is displaying Times New Roman.

In my CSS I am trying to call the font:

@font-face {
  font-family: 'PT Sans';
  font-style: normal;
  font-weight: normal;
  src: local('PT Sans'), local('PTSans-Regular'), url('http://themes.googleusercontent.com/font?kit=LKf8nhXsWg5ybwEGXk8UBQ') format('woff');
}


And I do have my h tags calling the right font:
h1, h2, h3, h4, h5, h6{
                  font-family: 'PT Sans' !important;
                  color: #333333;
                  font-weight: normal;
            }
      
      .heading .header{
                  font-family: 'PT Sans' !important;
      }

But if you click the link below you can see its totally different looking.

http://screencast.com/t/kgIs357iHGO


This is using the latest version of Chrome.   IE9 is closer, but still not pretty at all.
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
The problem with fonts is that they are contingent on the fonts that are available on the client's computer system.  My bet is that your PC does not have a PT Sans font installed, which means that this will happen on a lot of computers because PT Sans is not a "web safe" font.

See http://www.w3schools.com/cssref/css_websafe_fonts.asp
Have you read the following under the section under "Cross Browser Compatibility" of the @font-face CSS?

http://sixrevisions.com/css/font-face-guide/

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial