8

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.

dude
  • 5,678
  • 11
  • 54
  • 81
  • show the font-face code you are using – dippas Oct 15 '14 at 14:37
  • take a look at this: http://stackoverflow.com/questions/4060607/font-face-anti-aliasing-on-windows-and-mac/9041280#9041280 – dippas Oct 15 '14 at 14:57
  • Impressive, that doesn't even look like the same font size. I'd try dropping the svg version for debugging purposes: IIRC, only Chrome supports SVG fonts anyway. – Ulrich Schwarz Oct 15 '14 at 17:28
  • Yes, it looks like both browsers use very different engines to render fonts. Unfortunately removing the svg-url did not change anything.. – dude Oct 16 '14 at 07:30
  • @dippas "As I wrote above I already played with the order of this commands." – dude Oct 16 '14 at 07:36
  • can i know the font name ? – Vitorino fernandes Oct 20 '14 at 16:03
  • The font is called Siemens Sans Bold. It is in use e.g. here http://tablet.siemens.com/entry/cc/en/. The footer on this page shows the font problem. – dude Oct 21 '14 at 11:19
  • What if you will change order of the loading in your @font-face and you will put SVG on first place (like default)? – LJ Wadowski Oct 22 '14 at 14:56
  • @Wado I can only repeat: "As I wrote above I already played with the order of this commands." – dude Oct 22 '14 at 21:17

4 Answers4

3

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.

Bill
  • 25,119
  • 8
  • 94
  • 125
  • Thank your for your reply. I am searching a way to fix this font issue so that it looks not so different on each browser, but website-based. So a change in the browser settings or on the graphic-card would not be a solution for me, sorry. But it is still interesting! – dude Oct 20 '14 at 07:15
  • 2
    If you turn off DirectWrite and it fixes your font issue, then unfortunately that means there is no way to fix the issue in your website code. There is no magic 'make my font look the same in all browsers' css or html. – Bill Oct 20 '14 at 17:15
  • See my updated post. The link shows the font issue in the footer. As I wrote above I'm searching a fix for firefox. Do you know a way to fix it firefox-based? – dude Oct 21 '14 at 11:23
3

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.

dude
  • 5,678
  • 11
  • 54
  • 81
1

I had the same problem and fixed it with the follow small thing

color:#505563;
font-family: 'Dosis', sans-serif;
text-shadow: 0px 1px 2px #eeeeee;

In other words just add text shadow and it will work fine, play with the correct colors as an artist. Try this

text-shadow: 0px 0px 1px #eeeeee;
  • Also the fonts I use I saved them on my own hosting because if you retrieve them from Google it will not always load correctly neither faster –  Oct 25 '14 at 05:38
  • Maybe this has solved the problem with your font, but not with the font used on the demo page. I've tested it as you said, but that did not affect the problem. Maybe 'Dosis' is a tiny font, and the text-shadow makes the font stable in your example. – dude Oct 26 '14 at 15:53
0

Browsers have accessibility features that override CSS. Make sure the text or page settings are not zooming. See https://support.mozilla.org/en-US/kb/font-size-and-zoom-increase-size-of-web-pages

If nothing else this will at least rule out one variable, making debugging more effective.

Ken
  • 207
  • 1
  • 11
  • You could test it yourself. I have no zoom enabled on the demo page, but the effect still appears. – dude Oct 26 '14 at 15:50