CODEWITHSUNDEEP
htmlcsswordpressbrowsergoogle-font-api
4ndro1d
4ndro1d

Reputation: 2976

Using fonts with Wordpress in different Browsers

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:

enter image description here

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

Upvotes: 2

Views: 1147

Answers (1)

Aamir Shahzad
Aamir Shahzad

Reputation: 6834

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!

Upvotes: 2

Related Questions