Using fonts with Wordpress in different Browsers

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:

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

As @Zeshan Khan Alvi said, what version of Opera? The old one that use Presto Engine (and no longer gets updates) or the new one Opera Next that use Webkit Engine ? — drip, Feb 15 '14 at 19:45

score 2 · Answer 1 · edited May 23 '17 at 12:29

2

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!

edited May 23 '17 at 12:29

Community

1
1

answered Feb 15 '14 at 19:36

Aamir Shahzad

6,683
8
47
70

I actually downloaded the fonts at fontsquirrel, but still problems. So Opera has bugs I can't fix? – 4ndro1d Feb 22 '14 at 14:13
@4ndro1d which opera version you are using? – Aamir Shahzad Feb 22 '14 at 15:08
@4ndro1d css code you have posted have just one font format... where are the rest? you must pass different formats like otf,ttf,svg convert them on font squirrel and use them... – Aamir Shahzad Feb 22 '14 at 15:13
check this hope you will figure out something, http://stackoverflow.com/questions/3245141/using-otf-fonts-on-web-browsers – Aamir Shahzad Feb 22 '14 at 17:13
As I'm usin .otf font, which I downloaded from fontquirrel I guess i did everything right? I'm not having any problems with IE, only with Chrome and Opera – 4ndro1d Feb 23 '14 at 20:38

Using fonts with Wordpress in different Browsers

1 Answers1