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?
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