Using fonts with Wordpress in different Browsers - html

Question

So I've read that there is a bug on Chrome for Windows which cause bad rendering. Is this the same for Opera? And why isn't it working for IE?
Font: http://www.google.com/fonts#UsePlace:use/Collection:Libre+Baskerville
Embedding:
wp_enqueue_style('fontbask', 'http://fonts.googleapis.com/css?family=Libre+Baskerville:400,500,700,400italic&subset=latin,latin-ext');
CSS I've tried
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-text-stroke: 1px transparent;
Result:
Brwoser versions:
Opera 19.0.1326.63
Chrome 32.0.1700.107 m
Internet Explorer 11.0.9600.16518
Firefox 26.0
I also tried to use font-face to include the fonts, which had exactly the same result.
#font-face {
font-family: 'LibreBaskerville';
src: url('fonts/LibreBaskerville-Regular.otf') format('truetype');
font-weight: normal;
font-style: normal;
}
I downloaded the fonts # http://www.fontsquirrel.com/fonts/libre-baskerville?q[term]=baskerville&q[search_check]=Y
In this screenshot it doesn't look that bad, but you can see live here: http://www.citizen-science.at/wordpress/
I also found that the font from http://www.google.com/fonts#UsePlace:use/Collection:Libre+Baskerville is rendered as badly as well. So it seems it is a browser issues.
When I'm using my local fonts instead of Google fonts, IE is able to show it, but Opera and Chrome still don't

Answer 1

Opera have issue in font rendering. this will help you finding the solution. If Google fonts are not must use for you then i recommend this website for web font generation. This works awesomely with cross browser compatibility.
#font-face {
font-family: 'libre_baskervilleregular';
src: url('librebaskerville-webfont.eot');
src: url('librebaskerville-webfont.eot?#iefix') format('embedded-opentype'),
url('librebaskerville-webfont.woff') format('woff'),
url('librebaskerville-webfont.ttf') format('truetype'),
url('librebaskerville-webfont.svg#libre_baskervilleregular') format('svg');
font-weight: normal;
font-style: normal;
}
Web fonts generated from fontsquirrel. Use this, these will work with cross browser compatibility including Opera.
good luck!