1

I am working on Asp.net MVC application.

In my application the text is displayed looks less bold in chrome than Firefox.

Chrome:

enter image description here

FireFox:

enter image description here

This is my css:

body {
    font-size: 13px;
    color: #333;
    background: #f2f6f7;
    font-family: 'Roboto', sans-serif;
    -webkit-font-smoothing: antialiased;
}

Is there anything that I can changed in the code to get the same feel across all browsers?

Mike
  • 16,690
  • 2
  • 19
  • 25
daredevil
  • 127
  • 2
  • 15
  • 1
    Possible duplicate of [How to prevent different browsers rendering fonts differently?](https://stackoverflow.com/questions/30876894/how-to-prevent-different-browsers-rendering-fonts-differently) – Enrico Lund Feb 02 '18 at 13:55

2 Answers2

0

You could try setting text-rendering: optimizeLegibility; worth noting that all browsers have their own rendering engine so it might not be possible to get it perfect.

Mike
  • 16,690
  • 2
  • 19
  • 25
0

You could try this in Firefox:

-moz-osx-font-smoothing: grayscale;

Alternatively, if you don't want the thinner font, you could disable the font-smoothing in Chrome:

-webkit-font-smoothing: unset;

delinear
  • 2,745
  • 1
  • 10
  • 21