Font looks differently on production build | Next.js | Page 1

Hey!

I am using next 14.2.24
I have an issue where the font I am using looks different on the development server compare to a production build (attached 2 images an example).
It causing breaking points issues and the dev experience is not reliable as the end resulte might look different

I am using the Inter font and importing using a link:

  <link rel="preconnect" href="https://fonts.googleapis.com" />
  <link
    rel="preconnect"
    href="https://fonts.gstatic.com"
    crossOrigin="anonymous"
  />
  <link
    href="https://fonts.googleapis.com/css2?family=Birthstone&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap"
    rel="stylesheet"
  />

I am using styled component for different typography with the following settings applied to all texts:

  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  text-rendering: optimizelegibility;
  font-feature-settings: 'liga';
  font-variant-numeric: lining-nums;
  font-kerning: normal;

Things I tried (none worked):

Changing properties in next config: experimental-optimizeCss, swcMinify, optimizeFonts
Setting the font using next/font (same result, although the font weigth was changed, still dev and prod are different)
Removing all the smoothing properties also does not fix the issue

What else can I try? why does it even happens?
Thank you

#Font looks differently on production build