Problem with next/font/google CSS Variables in Tailwind CSS with Next.js v5 + Tailwind v4 #77337

Jafar-Sabaouni · 2025-03-20T14:58:16Z

Jafar-Sabaouni
Mar 20, 2025

Summary

I'm currently using Next.js v5 with Tailwind CSS v4 in my project and ran into an issue when trying to integrate fonts from next/font/google with my Tailwind configuration.

In previous versions of Tailwind, I could assign CSS variables to fonts within the Tailwind theme, and everything worked as expected. However, with the new CSS-based configuration in Tailwind v4, that method no longer seems to function correctly.

My First Attempt (Unsuccessful)

I initially followed the same approach that worked in earlier versions:

layout.tsx

import { Inter, Syne } from "next/font/google";

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

const syne = Syne({
  variable: "--next-font-syne",
  subsets: ["latin"],
});

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <body className={`${inter.variable} ${syne.variable} bg-rich-black text-white`}>
        <Header />
        {children}
      </body>
    </html>
  );
}

tailwind.config.css

@theme {
  /* Fonts */
  --font-inter: var(--next-font-inter);
  --font-syne: var(--next-font-syne);
}

Unfortunately, this setup didn’t work as expected.

What Worked for Me

After some experimentation, I found the simplest solution was to directly assign the font names as strings instead of referencing the CSS variables:

@theme {
  /* Fonts */
  --font-inter: "inter";
  --font-syne: "syne";
}

This resolved the issue for me. If anyone has a better or more consistent method of integrating next/font/google with Tailwind v4’s new config system, I’d love to hear about it!

Additional information

No response

Example

No response

dnlsandiego · 2025-03-21T06:05:05Z

dnlsandiego
Mar 21, 2025

Referencing variables needs to be inside a @theme inline like:

@theme inline {
  --font-sans: var(--font-inter);
}

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Problem with next/font/google CSS Variables in Tailwind CSS with Next.js v5 + Tailwind v4 #77337

Uh oh!

{{title}}

Uh oh!

Replies: 1 comment

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

Problem with next/font/google CSS Variables in Tailwind CSS with Next.js v5 + Tailwind v4 #77337

Uh oh!

Jafar-Sabaouni Mar 20, 2025

Summary

My First Attempt (Unsuccessful)

What Worked for Me

Additional information

Example

Replies: 1 comment

Uh oh!

dnlsandiego Mar 21, 2025

Jafar-Sabaouni
Mar 20, 2025

dnlsandiego
Mar 21, 2025