Search code examples
cssfirefoxtext-rendering

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

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:

Firefox

And here in Chrome:

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.

Solution

  • 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.