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

i found this to be working great :

-webkit-text-stroke: 0.7px;

or

-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;
    font-family: 'Source Sans Pro', sans-serif;
    margin: 0;
    font-weight: lighter;
    -webkit-text-stroke: 0.7px;

Answer 2

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.

Answer 3

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

Answer 4

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