Google chrome Version 32.0.1700.76 m font issues - html

Question

I've updated Google chrome browser recently. I noticed some of the fonts are not rendering correctly. On the other browsers it's seems fine. However this issue only appear in Chrome v32.0.17...76 m.
I've used "Open Sans" & "Novecentowide" Fonts.
The below CSS styles I've used for my HTML heading.
CSS
----
#font-face {
font-family: 'OpenSansSemibold';
src: url('../fonts/fonts_main/open-sans/OpenSans-Semibold-webfont.eot');
src: url('../fonts/fonts_main/open-sans/OpenSans-Semibold-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/fonts_main/open-sans/OpenSans-Semibold-webfont.woff') format('woff'),
url('../fonts/fonts_main/open-sans/OpenSans-Semibold-webfont.ttf') format('truetype'),
url('../fonts/fonts_main/open-sans/OpenSans-Semibold-webfont.svg#OpenSansSemibold') format('svg');
font-weight: 600;
font-style: normal;
}
#font-face {
font-family: 'OpenSansRegular';
src: url('../fonts/fonts_main/open-sans/OpenSans-Regular-webfont.eot');
src: url('../fonts/fonts_main/open-sans/OpenSans-Regular-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/fonts_main/open-sans/OpenSans-Regular-webfont.woff') format('woff'),
url('../fonts/fonts_main/open-sans/OpenSans-Regular-webfont.ttf') format('truetype'),
url('../fonts/fonts_main/open-sans/OpenSans-Regular-webfont.svg#OpenSansRegular') format('svg');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'novecentowide-medium-webfont';
src: url('../fonts/fonts_main/Novecentowide-m/Novecentowide-Medium-webfont.eot');
src: url('../fonts/fonts_main/Novecentowide-m/Novecentowide-Medium-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/fonts_main/Novecentowide-m/Novecentowide-Medium-webfont.woff') format('woff'),
url('../fonts/fonts_main/Novecentowide-m/Novecentowide-Medium-webfont.ttf') format('truetype'),
url('../fonts/fonts_main/Novecentowide-m/Novecentowide-Medium-webfont.svg#novecentowide-medium-webfont') format('svg');
font-weight: 500;
font-style: normal;
}
#font-face {
font-family: 'novecentowide-normal-webfont';
src: url('../fonts/fonts_main/Novecentowide-n/Novecentowide-Normal-webfont.eot');
src: url('../fonts/fonts_main/Novecentowide-n/Novecentowide-Normal-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/fonts_main/Novecentowide-n/Novecentowide-Normal-webfont.woff') format('woff'),
url('../fonts/fonts_main/Novecentowide-n/Novecentowide-Normal-webfont.ttf') format('truetype'),
url('../fonts/fonts_main/Novecentowide-n/Novecentowide-Normal-webfont.svg#novecentowide-normal-webfont') format('svg');
font-weight: normal;
font-style: normal;
}
h1 { font-family: 'OpenSansRegular'; }
HTML
---------
<h1> Test on CHrome </h1>
However still fonts are not rendering correctly on new version of Chrome Browser. Please help me to solve this issue.
Edit:
On Chrome
On fire fox
On Chrome
-----------Next Method-------------------------------------------
HTML
<h6 class="title1">This is opensans Regular</h6>
<h6 class="title2">This is opensans semibold</h6>
CSS
#font-face {
font-family: 'OpenSansRegular';
src: url('/fonts/fonts_main/open-sans/OpenSans-Regular-webfont.eot');
src: url('/fonts/fonts_main/open-sans/OpenSans-Regular-webfont.eot?#iefix') format('embedded-opentype'),
url('/fonts/fonts_main/open-sans/OpenSans-Regular-webfont.woff') format('woff'),
url('/fonts/fonts_main/open-sans/OpenSans-Regular-webfont.ttf') format('truetype'),
url('/fonts/fonts_main/open-sans/OpenSans-Regular-webfont.svg#OpenSansRegular') format('svg');
font-style: normal;
}
#font-face {
font-family: 'OpenSansSemibold';
src: url('/fonts/fonts_main/open-sans/OpenSans-Semibold-webfont.eot');
src: url('/fonts/fonts_main/open-sans/OpenSans-Semibold-webfont.eot?#iefix') format('embedded-opentype'),
url('/fonts/fonts_main/open-sans/OpenSans-Semibold-webfont.woff') format('woff'),
url('/fonts/fonts_main/open-sans/OpenSans-Semibold-webfont.ttf') format('truetype'),
url('/fonts/fonts_main/open-sans/OpenSans-Semibold-webfont.svg#OpenSansSemibold') format('svg');
font-style: normal;
}
h6.title1 {
font-family: 'OpenSansRegular';
font-weight: normal;
}
h6.title2 {
font-family: 'OpenSansSemibold';;
font-weight: 600;
}
h6.title1, h6.title2 { color: #54403C; font-size: 1.3em; }
body { font-size: 10px; }
Chrome
Fire Fox

Answer 1

So Chrome is rendering in normal font-weight, and Firefox is bold?
The font you're specifying only has a normal weight. So Chrome is correctly rendering the font, and Firefox has applied a faux bold effect to a non-bold typeface, as its default style for an h1 is to apply "boldness".
If you want them both normal:
h1 {
font-family: 'OpenSansRegular';
font-weight: normal; /* tell all browsers not to apply faux bold */
}
Or, if you want them both bold, specify the semi-bold face you have:
h1 {
font-family: 'OpenSansSemibold';
font-weight: 600;
}
This is a common pitfall when working with web fonts - always specify a font-weight on elements using them to avoid this.
EDIT
Adding text-rendering: optimizeLegibility; to the heading styles may help to normalise the rendering between browsers. I'm not sure if it addresses actual character rendering or just uses a different kerning algorithm, but worth a shot. It's difficult for me to test this as I don't have the same issue with this font on Chrome here.