Firefox font-face rendering looks very different to e.g. Chrome

Question

I am having trouble with @font-face in CSS. The font I am using looks very different in each browser.

See this example in Firefox:

And here in Chrome:

I don't know what causes this problem. I already tried to use text-rendering and I also tried changing the order of the url-properties in the @font-face declaration.

I am using Windows 7 Professional and Firefox V30.

Can somebody inform me about the reason for this issue and tell me how I could fix it?

Many thanks.

//EDIT: This is the @font-face declaration I am using:

@font-face {
    font-family: 'MyFont';
    src: url('myFont.eot');
    src: url('myFont.eot?#iefix') format('embedded-opentype'),
        url('myFont.svg#myfont') format('svg'),
        url('myFont.woff') format('woff'),
        url('myFont.ttf') format('truetype');
    font-style: normal;
    font-weight : normal;
}

As I wrote above I already played with the order of this commands.

In my particular problem you can see this page (footer) showing the problem.

Answer 1

Most modern browsers use DirectWrite on Windows to render text, except for Chrome. Luckily they are implementing it now and it was recently set as the default in the latest Chrome builds. Thats the good news, the bad news is that it still has bugs and doesn't always render fonts correctly. You can see if this is a problem by disabling it to see if that fixes the issue.

To disable DirectWrite type chrome://flags/ in the address bar and find the option labeled 'Disable DirectWrite'. If this does fix the issue, you should log a bug with the examples of your text rendering so that it can be fixed.

You can read more about it on the Chrome blog at http://blog.chromium.org/2014/07/chrome-37-beta-directwrite-on-windows.html.

Answer 2

This seems to be a font issue since all opportunities that work for others do not affect the problem. Switching to a other font is the only solution in this moment.