Fonts looks different in Firefox and Chrome

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.

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

There are a few fixes. But usually it can be fixed with:

html {  -webkit-font-smoothing: antialiased;  -moz-osx-font-smoothing: grayscale;}

Sometimes it can be due to font-weight. If you are using a custom font with @font-face make sure your font-weight syntax is correct. In @font-face the idea of the font-weight/font-style properties are to keep your font-family name across different @font-face declarations while using different font-weight or font-style so those values work properly in CSS (and load your custom font -- not "fake bold").

I've seen -webkit-text-stroke: 0.2px; mentioned to thicken webkit fonts, but I think you probably won't need this if you use the first piece of code I gave.