0

This is how the font looks in chrome: chrome

And this is firefox: ff

Notice the weird spacing between letters in firefox? It's ok in chrome though.

Somethings which I observed:

  • Changing font size fixes the problem
  • Changing font weight fixes the problem

How can I make firefox render the font correctly by changing the source code (not by changing OS settings or firefox browser settings) ?

henry
  • 4,244
  • 2
  • 26
  • 37
pkyo
  • 194
  • 12
  • Dirty approach: Detect FF's useragent, add a class that adds a bit of font-size or font-weight, remove this class on document ready with Javascript. This forces FF to repaint the font. – Demnogonis Sep 06 '16 at 07:27
  • Even Mozilla itself thinks it's a bad idea to start sniffing for the user agent. https://developer.mozilla.org/en-US/docs/Web/HTTP/Browser_detection_using_the_user_agent – roberrrt-s Sep 06 '16 at 07:56
  • 1
    Is the text `justified`? If so, we could be seeing a difference between how Chrome and FF deal with that letter spacing. Either way, what happens if you add `letter-spacing: normal`? What about `letter-spacing: 0`? – henry Sep 06 '16 at 17:10
  • This fixed it! You should add this as the answer. Thanks! – pkyo Sep 07 '16 at 12:19

1 Answers1

0

If you're the only one experiencing this problem:

If this actually is browser related, you might want to check into the magical world of font smoothing. (which isn't magical, but a nightmare, but we'll get to that).

So i've read all options in this topic, and it seems your CSS should contain the following rules: Webfont Smoothing and Antialiasing in Firefox and Opera

.font-smoothing {
    font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

Could you please tell if this works? I'm quite intrigued as well now.

Community
  • 1
  • 1
roberrrt-s
  • 7,914
  • 2
  • 46
  • 57
  • 1
    Sure. As soon as possible. – pkyo Sep 06 '16 at 08:02
  • Neither the solutions? Could you create a jsfiddle with this problem for me to inspect it here? – roberrrt-s Sep 06 '16 at 09:01
  • I could not try the first solution as that url is blocked in my office. JSFiddle is not replicating the problem so it would be better to create an html file and open it in chrome and firefox ..............
    write down or Refer effectively ef
    – pkyo Sep 06 '16 at 09:24
  • Well, this is odd, it seems it's your display that's been causing the issue, since I cannot seem to recreate the problem: https://i.gyazo.com/47a3457ff46f705bf9b982bfef3c1cc3.png – roberrrt-s Sep 06 '16 at 09:28
  • Size difference is due to my 110% zooming on Chrome by default (using a very large screen here) – roberrrt-s Sep 06 '16 at 09:28
  • 1
    Looks like I will have to find a workaround for this problem. Thanks a lot for the help! – pkyo Sep 06 '16 at 09:38
  • Since OP says "changing the font size fixes the problem", zoomed Chrome *should* not replicate the problem – henry Sep 06 '16 at 17:06
  • The issue isn't in chrome, it's in firefox – roberrrt-s Sep 06 '16 at 17:08