0

I'm having a strange issue in font-rendering differences between latest versions of Chrome and Firefox.

I'm using a hair space character with a font stack as follows:
font-family: "Verdana", "Geneva", sans-serif;

I haven't found a reliable resource what's going wrong but there's a clear difference in rendering this character:

Codepen

What I've found out so far:

  • Chrome seems to render the hair space in Verdana
  • Firefox isn't able to do this and falls back to Times New Roman
  • Geneva seems to have a glyph for this character but it's the same width as a normal space (rendering it useless)

The main question is: Why is Verdana behaving differently in Chrome and Firefox. Both use the same system font.

[EDIT]
I've added an animated gif to show you the difference I'm experiencing. Apart from minor tweaks to the line heights I haven't changed the base images. The rendering is alsmost completely different except the hair space. Maybe this is a macOS specific problem:

Animation

nirazul
  • 3,928
  • 4
  • 26
  • 46
  • Browser use different font rendering engine and in different bowser and different SO you may have very different behaving of the same font. Read this: http://stackoverflow.com/questions/30876894/how-to-prevent-different-browsers-rendering-fonts-differently – Germano Plebani Apr 06 '17 at 08:50
  • I'm aware of this, however this is a problem of glyphs not being used at all. This has nothing to do with actual rendering. – nirazul Apr 06 '17 at 10:10
  • @Nirazul I don't see it. Here is a screenshot of the two browsers side by side on Windows 8.1: https://i.stack.imgur.com/iw1hU.jpg – Mr Lister Apr 06 '17 at 20:29
  • @MrLister So this might be a system dependent issue. Thanks for posting your screenshot! I've added an animated gif to show what I see on macOS. – nirazul Apr 07 '17 at 07:37

0 Answers0