Use variable font weight with inter in nextjs app

I just set up a nextjs app and want to use the variable Inter font, but I cant set the font weight.

import Head from "next/head";
import "@/styles/globals.css";
import type { AppProps } from "next/app";
import { Inter } from "next/font/google";
import Layout from "@/components/Layout/Layout";
import styles from "@/styles/Main.module.css";

const inter = Inter({
  subsets: ["latin"],
});

export default function App({ Component, pageProps }: AppProps) {
  const title = "App title";

  return (
    <>
      <Head>
        <title>{title}</title>
        <meta name="description" content="description" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <Layout>
        <style jsx global>{`
          html {
            font-family: ${inter.style.fontFamily};
          }
        `}</style>

        <main className={`${styles.main}`}>
          <Component {...pageProps} />
        </main>
      </Layout>
    </>
  );
}

But anywhere in my app where I want to set a different font weight, the font weigt doesn't change.

If I inspect the rendered text, it uses '__Inter_Fallback_44d352' so it looks like it maybe not be using the variable font at all?

What am I missing here?

Solution

I tested this on a slightly older project, which uses next v13.2.1, and I fixed it by bumping back the next version from 13.2.4 to 13.2.1