SyntaxFix

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

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.

Examples related to css

• need to add a class to an element • Using Lato fonts in my css (@font-face) • Please help me convert this script to a simple image slider • Why there is this "clear" class before footer? • How to set width of mat-table column in angular? • Center content vertically on Vuetify • bootstrap 4 file input doesn't show the file name • Bootstrap 4: responsive sidebar menu to top navbar • Stylesheet not loaded because of MIME-type • Force flex item to span full row width

Examples related to fonts

• How to import a new font into a project - Angular 5 • Font Awesome 5 font-family issue • How do I change the font color in an html table? • How to add fonts to create-react-app based projects? • Changing fonts in ggplot2 • Webpack "OTS parsing error" loading fonts • Failed to decode downloaded font • Proper MIME type for .woff2 fonts • Link a .css on another folder • How can I fix the 'Missing Cross-Origin Resource Sharing (CORS) Response Header' webfont issue?

Examples related to cross-browser

• Show datalist labels but submit the actual value • Stupid error: Failed to load resource: net::ERR_CACHE_MISS • Click to call html • How to Detect Browser Back Button event - Cross Browser • How can I make window.showmodaldialog work in chrome 37? • Cross-browser custom styling for file upload button • Flexbox and Internet Explorer 11 (display:flex in <html>?) • browser sessionStorage. share between tabs? • How to know whether refresh button or browser back button is clicked in Firefox • CSS Custom Dropdown Select that works across all browsers IE7+ FF Webkit