Same font except its weight seems different on different browsers

Question

The text is correctly displayed in Chrome  I want it to display this way in all browsers  How can I do this   I was able to fix this in Safari with -webkit-font-smoothing  antialiased   Chrome    Firefox     x000D   x000D  h1   x000D      font-family  Georgia  x000D      font-weight  normal  x000D      font-size  16pt  x000D      color   444444  x000D      -webkit-font-smoothing  antialiased  x000D    x000D   lt h1 gt Hi  my name lt  h1 gt  x000D   x000D   x000D    And a JSFiddle  http   jsfiddle net jnxQ8 1

User · Answer

I collected and tested discussed solutions:

Windows10 Prof x64:

* FireFox v.56.0 x32 
* Opera v.49.0
* Google Chrome v.61.0.3163.100 x64-bit

macOs X Serra v.10.12.6 Mac mini (Mid 2010):

* Safari v.10.1.2(12603.3.8)
* FireFox v.57.0 Quantum
* Opera v49.0

Semi (still micro fat in Safari) solved fatty fonts:

text-transform: none; // mac ff fix
-webkit-font-smoothing: antialiased; // safari mac nicer
-moz-osx-font-smoothing: grayscale; // fix fatty ff on mac

Have no visual effect

line-height: 1;
text-rendering: optimizeLegibility; 
speak: none;
font-style: normal;
font-variant: normal;

Wrong visual effect:

-webkit-font-smoothing: subpixel-antialiased !important; //more fatty in safari
text-rendering: geometricPrecision !important; //more fatty in safari

do not forget to set !important when testing or be sure that your style is not overridden

User · Answer

Be sure the font is the same for all browsers  If it is the same font  then the problem has no solution using cross-browser CSS   Because every browser has its own font rendering engine  they are all different  They can also differ in later versions  or across different OS s   UPDATE  For those who do not understand the browser and OS font rendering differences  read this and this   However  the difference is not even noticeable by most people  and users accept that  Forget pixel-perfect cross-browser design  unless you are    Trying to turn-off the subpixel rendering by CSS  not all browsers allow that and the text may be ugly     Using images  resources are demanding and hard to maintain  Replacing Flash  need some programming and doesn t work on iOS      UPDATE  I checked the example page  Tuning the kerning by text-rendering should help   text-rendering  optimizeLegibility     More references here    Part of the font-rendering is controlled by font-smoothing  as mentioned  and another part is text-rendering  Tuning these  properties may help as their default values are not the same across browsers  For Chrome  if this is still not displaying OK for you  try this text-shadow hack  It should improve your Chrome font rendering  especially in Windows  However  text-shadow will go mad under Windows XP  Be careful

User · Answer

In order to best standardise your  font-face embedded fonts across browsers try including the below inside your  font-face declaration or on your body font styling   speak  none  font-style  normal  font-weight  normal  font-variant  normal  text-transform  none  line-height  1  -webkit-font-smoothing  antialiased    At present there looks to be no universal fix across all platforms and browser builds  As stated frequently all browsers OS have different text rendering engines

User · Answer

I have many sites with this issue  amp  finally found a fix to firefox fonts being thicker than chrome   You need this line next to your -webkit fix -moz-osx-font-smoothing  grayscale   body      text-rendering  optimizeLegibility     -webkit-font-smoothing  subpixel-antialiased     -webkit-font-smoothing  antialiased     -moz-osx-font-smoothing  grayscale

User · Answer

Try -webkit-font-smoothing  subpixel-antialiased

User · Answer

I don t think using  points  for font-size on a screen is a good idea  Try using px or em on font-size   From W3C       Do not specify the font-size in pt    or other absolute length units  They   render inconsistently across platforms   and can t be resized by the User Agent    e g browser

User · Answer

There s some great information about this here  https   bugzilla mozilla org show bug cgi id 857142  Still experimenting but so far a minimally invasive solution  aimed only at FF is   body   -moz-osx-font-smoothing  grayscale

User · Answer

Try text-rendering  geometricPrecision    Different from text-rendering  optimizeLegibility   it takes care of kerning problems when scaling fonts  while the last enables kerning and ligatures

[css] Same font except its weight seems different on different browsers

Examples related to css

Examples related to fonts

Examples related to cross-browser