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 anything that I need to add so that it looks same in all browsers?

Answer 1

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.

Answer 2

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) {         $('body').addClass('firefox');     } } 

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; }