Firefox an IE renders fonts badly, eg Roboto font

Question

I use angular material design and so I have Roboto font in it. Aclually there are some other fonts but they have same issues.

Roboto font looks like below in Firefox and IE(left) and Chrome(right):

Why looks nice in Chrome but have that strange issues in FF and IE? How to solve this problem?

Answer 1

Solve the problem by this:

<link href='https://fonts.googleapis.com/css?family=Roboto:400,300,100,500,700&subset=latin,cyrillic' rel='stylesheet' type='text/css'>

Tried to do this by css @import but no luck.

Answer 2

we cannot solve that issue, that all depend on the browser. because of the different UI rendering engines look and feel also will be different.

Answer 3

Microsoft's ClearType rendering system produces really poor results on TrueType fonts without good font hinting (In short – small pieces of code, embedded inside a scaleable font, that distort its shape to make it look good even in lower resolutions). This is because ClearType, by default, does not apply anti-aliasing on the Y-axis. Since Roboto was designed for mobile devices with high DPIs, it doesn't have high quality hints, if any, so it will look bad on ClearType in lower resolutions.

Chrome probably alters ClearType default behavior (It is possible on Windows 7 and newer I believe) or includes its own font renderer, such as FreeType. I'm not aware of a way to force IE or Firefox to change their rendering methods, so my best advice is only use fonts with high quality hints for small sizes.