Fonts looks different in Firefox and Chrome

Question

I am using Google Web Font\'s PT-sans

font-family: \'PT Sans\',Arial,serif;

but it looks different in Chrome and Firefox

Is there

Answer 1

As of 2014, Chrome still has a known bug where if the webfont being used has a local copy installed, it choses to use the local version, hence, causing OP rendering issues.

To fix this, you can do the following:

First, target Chrome Browser or OSX (For me, the issue was with OSX Chrome only). I have used this simple JS to get quick Browser/OS's detection, you can chose to do this in any other way you're used to:

https://raw.github.com/rafaelp/css_browser_selector/master/css_browser_selector.js

Now that you can target a Browser/OS, create the following 'new' font:

@font-face {
    font-family: 'Custom PT Sans';    
    src: url(http://themes.googleusercontent.com/static/fonts/ptsans/v6/jKK4-V0JufJQJHow6k6stALUuEpTyoUstqEm5AMlJo4.woff) format('woff');
    font-weight: normal;
    font-style: normal;
}

The font URL is the same your browser uses when embedding the google webfont. If you use any other font, just copy and change the URL accordingly.

Get the URL here http://fonts.googleapis.com/css?family=PT+Sans:400,700&subset=latin,latin-ext

You may also rename your @font-face custom font-family alias.

Create a simple CSS rule to use that font targeting Browser/OS or both:

.mac .navigation a {    
    font-family: "Custom PT Sans", "PT Sans", sans-serif;
}

Or

.mac.webkit p {
    font-family: "Custom PT Sans", "PT Sans", sans-serif;
}

Done. Just apply the font-family rule wherever you need to.