[SOLVED] How to setup variable local fonts in next.js 15 and tailwindcss v4?

How to setup variable local fonts in next.js 15 and tailwindcss v4?

I've gotten the font to show up on my webpage, but the font weights aren't working at all. No matter what font weight I choose, the type looks the same.

I am using next/font/local to import a variable font like this:

import localFont from "next/font/local";

const satoshi = localFont({
  src: "./fonts/Satoshi-Variable.woff",
  variable: "--font-satoshi",
  display: "swap",
  weight: "100 900",
});

export default function RootLayout({ children }) {
  return (
    <html lang="en" className={satoshi.variable}>
      <body className="bg-background text-text px-24">
        <main>{children}</main>
      </body>
    </html>
  );
}

And in my globals.css I have:

@import "tailwindcss";

@theme inline {
  --font-satoshi: var(--font-satoshi), sans-serif;
}

I thought this would make it use the correct font and font weights. But it's only using the font.

Solution

I had to use the .woff2 file and it fixed itself. For anyone wondering in the future.