Take the 2-minute tour ×

I am using Google Web Font's PT-sans


but it looks different in Chrome and Firefox

Is there anything that I need to add so that it looks same in all browsers?

share|improve this question
Different browsers may render fonts slightly differently. You can't change that. –  BoltClock Jan 15 '11 at 7:53
Unless you want to implement your own font renderer, which would make your website slower than a <insert slow animal name hare>. –  muntoo Jan 15 '11 at 7:56
@muntoo: Or use images/flash/PDF, which will display more consistently –  Merlyn Morgan-Graham Jan 15 '11 at 7:59
@Merlyn Morgan-Graham: Images and Flash are out, Web Fonts is current trend –  I-M-JM Jan 15 '11 at 13:06
@I-M-JM: I agree. Also, HTML5/SVG > Flash. But I'd rather use flash/silverlight/PDF/simple images than try to write a font renderer, as muntoo suggested. I assume it was a joke, but still.. –  Merlyn Morgan-Graham Jan 16 '11 at 2:44
add comment

8 Answers

up vote 6 down vote accepted

css reset may fix the problem, I am not sure .


share|improve this answer
umm.. not really –  andrewk Jan 15 '11 at 7:56
hey its looking same in chrome and firefox now...thanks :) –  Tushar Ahirrao Jan 15 '11 at 12:41
Thanks I usually always include reset but on recent HTML5 project I was using a boilerplate and they didn't include a reset this is exactly what was causing the font to look bad in chrome. –  josh Jun 17 '12 at 12:46
This worked for me too. Thanks! –  Andrew Serff Jul 16 '12 at 23:38
This worked for me as well, but how do I apply my own stylesheet once this is reset is applied to the header of my html? What I mean by this is that I have my own stylesheet (call it mystyles.css), and I want it to govern the layout and style of the site while still maintaining consistency. –  astromax May 26 '13 at 18:22
show 3 more comments

For the ChunkFive font from FontSquirrel, specifying "font-weight: normal;" stopped Firefox's rendering from looking like ass when used in a header. Looks like Firefox was trying to apply a fake bold to a font that only has one weight, while Chrome was not.

share|improve this answer
I believe this was the problem I had. Tough one to nail down! –  Ben Jan 14 '12 at 6:43
add comment

For me, Chrome web fonts look crappy until I put the SVG font ahead of WOFF and TrueType. For example:

@font-face {
    font-family: 'source_sans_proregular';
    src: url('sourcesanspro-regular-webfont.eot');
    src: url('sourcesanspro-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('sourcesanspro-regular-webfont.svg#source_sans_proregular') format('svg'),
         url('sourcesanspro-regular-webfont.woff') format('woff'),
         url('sourcesanspro-regular-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;

Even then, Chrome's fonts look thinner than in Firefox or IE. Chrome looks good at this point, but I usually want to set different fonts in IE and Firefox. I use a mixture of IE conditional comments and jQuery to set different fonts depending on the browser. For Firefox, I have the following function run when the page loads:

function setBrowserClasses() {
    if (true == $.browser.mozilla) {

Then in my CSS, I can say

body { font-family: "source_sans_proregular", Helvetica, sans-serif; }
body.firefox { font-family: "source_sans_pro_lightregular", Helvetica, sans-serif; }

Likewise, in an IE-only stylesheet included within IE conditional comments, I can say:

body { font-family: "source_sans_pro_lightregular", Helvetica, sans-serif; }
share|improve this answer
This solves exactly my problem. –  Fuhrmann May 3 '13 at 12:56
Just a suggestion, nuke the Helvetica specific definition... sans-serif is usually defaulted to the most appropriate Helvetica-like font for the platform. Arial on windows, Helvetica on OSX, Droid-Sans on Android and Open-Sans on most others. –  Tracker1 May 22 '13 at 22:07
add comment

I've noticed that chrome tends to make fonts a bit more sharper and firefox a bit smoother. There is nothing you can do about it. good luck

share|improve this answer
That's not true. You can use -webkit-font-smoothing, e.g. tanookisuitlabs.com/your-fonts-look-bad-in-chrome-heres-the-fix –  Garry Tan Nov 7 '13 at 8:28
It may not be true almost two years later. –  andrewk Nov 9 '13 at 5:34
add comment

Different browsers (and FWIW, different OSes) use different font rendering engines, and their results are not meant to be identical. As already pointed out, you can't do anything about it (unless, obviously, you can replace text with images or flash or implement your own renderer using javascript+canvas - the latter being a bit overboard if you ask me).

share|improve this answer
add comment

To avoid font discrepancies across browsers, avoid using css styles to alter the look of the font. Using the font-size property is usually safe, but you may want to avoid doing things like font-weight: bold; instead, you should download the bold version of the font and give it another font-family name.

share|improve this answer
add comment

i found this to be working great :

-webkit-text-stroke: 0.7px;


-webkit-text-stroke: 1px rgba(0, 0, 0, 0.7);

experiment with the "0,7" value to adjust to your needs. The lines are added where you define the bodys font.

here is an example:

body {
    font-size: 100%;
    background-color: #FFF;
    margin: 0;
    font-weight: lighter;
    -webkit-text-stroke: 0.7px;
share|improve this answer
add comment

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:


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;


.mac.webkit p {

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

share|improve this answer
I should add that Chrome may still display font thickening a little different, so you can normalize this via CSS: "-webkit-text-stroke: 0.2px;" –  Antonio Max Feb 27 at 16:57
add comment

Your Answer


