Different styles in Chrome vs Firefox (font-medium)

[AdamowiczPawel]

Hello,
I have a problem with displaying styles between browsers (Firefox vs Chrome),

Website https://ui.shadcn.com/ looks the same in Firefox and Chrome.

When I use components from shadcn (after installation according to the Vite instructions), for example, buttons look different in Firefox (font weight is not taken into account).

The problem occurs with font-medium style. As far as I found, this problem is probably related to the lack of font-weight 500.

I tried adding font to index.css however, this does not solve the problem.
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap");

I believe this is Tailwind problem but does anyone know how to bypass this difference and why there is no such problem on https://ui.shadcn.com?

Best regards

[EdoanR]

This is happening to me too. I managed to make it look slightly more similar by increasing the weight of font-medium by 1, setting its value to 501 instead of 500. It still looks different, but in my opinion, it’s less noticeable.

tailwind.config.js:

module.exports = {
  theme: {
    extend: {
+      fontWeight: {
+       medium: "501",
+      },
    }
}