Why Font looks differ browser to browser

Question

Why there is so much difference in the way the fonts looks in different browsers? I'm using the same css (css3) and same font (Source Sans Pro). Following are the screenshots for better definition:

Firefox Image

Chrome Image

Firefox Image

Chrome Image

You can see a lot of difference in there, text is much clear in firefox, but in chrome it looks pathetic. Any suggestion on how to make them look exact similar in all different browsers (cross browser)?

Answer 1

Fonts vary by Operation System, and Browser. It is a somewhat complicated process, so I would take a look at this article on why and how fonts are rendered in the OS and Browser. There are plenty of other resources of the web that can offer supplemental information on this topic if that article doesn't offer a in-depth enough answer.

Answer 2

You could use <canvas> or SVG to make it consistent. To learn about the basics of doing so with canvas MDN has a good reference, with SVG MDN also is a good reference. Optimally we'd have a better way but this is the only way I know to make it perfectly consistent across browsers without images

As Minitech mentioned in the comments this isn't a SEO problem given you are only replacing what is on the page, e.g. <canvas>Title</canvas> when you have "Title" written on the canvas

The issue with this approach, again as Minitech mentioned, the interactivity of it. They both practically produce an image-like result and share the restrictions as such

On a semi side note, CanvasPod is a great tool meant for mobile development that includes allowing fonts to be consistent

Answer 3

Actually it would be almost impossible to make them look the same in different browsers (even when running on the same OS)

every browser has a different font rendering strategy (and so does every OS) , it mostly relies on the OS routines to render the font on the webpage, with few things like kerning and ligatures, as well as the application of underline position and thickness,under browser's control, so we cannot expect perfectly identical rendering in all browsers (even on one platform)

you can read more about it here.

http://www.smashingmagazine.com/2012/04/24/a-closer-look-at-font-rendering/

Answer 4

To make them look exactly the same, you could either create your own font and modify it slightly for each browser and use trial and error until they look the same.

Or, a better option, you could use images instead of text.

An even better option I think is to just choose a font that looks good in both.