Same font except its weight seems different on different browsers

by

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:

  1. Trying to turn-off the subpixel rendering by CSS (not all browsers allow that and the text may be ugly…)
  2. Using images (resources are demanding and hard to maintain)
  3. 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:

  1. 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.
  2. 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.

More Related Contents:

  1. How to disable text selection highlighting
  2. Are eot, ttf, and svg still necessary in the font-face declaration?
  3. Truncating long strings with CSS: feasible yet?
  4. Font Awesome 5 Choosing the correct font-family in pseudo-elements
  5. What is WebKit and how is it related to CSS?
  6. Wait for fonts to load before rendering web page
  7. What does the forward slash mean in the CSS font shorthand?
  8. Is there any “font smoothing” in Google Chrome?
  9. Downloading a Google font and setting up an offline site that uses it
  10. Failed to decode downloaded font
  11. Create webfont with Unicode Supplementary Multilingual Plane symbols
  12. Font size in CSS – % or em? [duplicate]
  13. Why doesn’t [CSS feature] work in [browser] but works in others?
  14. Webfont Smoothing and Antialiasing in Firefox and Opera
  15. Webpack “OTS parsing error” loading fonts
  16. Force Non-Monospace Font into Fixed Width Using CSS
  17. How can I zoom an HTML element in Firefox and Opera?
  18. Fallback fonts on special characters
  19. Why would font names need quotes?
  20. Styling Password Fields in CSS
  21. Are CSS selectors case-sensitive?
  22. What does font-size really correspond to?
  23. Make text height 100% of div?
  24. “text-decoration” and the “:after” pseudo-element, revisited
  25. Non-Standard fonts in web?
  26. Vertically and horizontally centering text in circle in CSS (like iphone notification badge)
  27. Styling browser-native video controls
  28. -webkit-font-smoothing property has no effect in Chrome
  29. IE6/IE7 css border on select element
  30. Fix custom font line-height with CSS

Leave a Comment