Adding Custom Font from local to Next.js 15 and Tailwind CSS 4

Question

Hello I'm trying to add a local font that I've downloaded to my Next.js project but I'm having trouble loading it in my project.

./src/app/layout.tsx

import localFont from 'next/font/local'

const dinround = localFont({
  src: [
    {
      path: '../../public/fonts/DIN Round Pro/dinroundpro.otf'
    }
  ],
  variable: '--font-dinround'
})

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <body className={`${geistSans.variable} ${geistMono.variable} ${dinround.variable} antialiased`}>
        {children}
      </body>
    </html>
  );
}

In the Next.js docs it says to add the variables to the tailwind.config.js file but for TailwindCSS v4 there isn't a config file anymore. There's a postcss.config.mjs file but I don't think that's the same thing, So I assumed I do it in my globals.css file.

./src/styles/globals.css

@import "tailwindcss";

@plugin "daisyui" {
  themes: light --default, dark;
  root: ":root";
  logs: true;
}

@theme {
  /* ... */
}

So I'm unsure of how to add the variables that I added to the layout.tsx file in my TailwindCSS config file to use throughout my app.

rozsazoltan · Accepted Answer · 2025-04-07 05:28:05Z

Solution: CSS-first configuration with `@theme` directive

Your description was written for TailwindCSS v3. You're right, starting from v4, there's no need for tailwind.config.js.

vercel/next.js #75384: Docs: Outdated tailwind docs for the tailwind v4 release - GitHub
CSS-first configuration - TailwindCSS v4 Blog

Instead, they introduced a CSS-first configuration approach with many useful and simple directives. Here's how you can add a font:

@theme directive - TailwindCSS v4 Docs
Theme variable namespaces - TailwindCSS v4 Docs

./src/styles/globals.css

@theme {
  --font-display: "Satoshi", "sans-serif";
}

You can customize our theme using the @theme directive, which previously had to be done under the extends.theme key in tailwind.config.js. I've attached the table to different namespaces - for fonts, you can use --font-*.

Specifically, adding your font:

./src/styles/globals.css

@theme {
  --font-dinround: var(--font-dinround);
}

Alternative: legacy JavaScript-based configuration

In addition, Tailwind v4 still includes the legacy JavaScript-based configuration, although I recommend trying out the new CSS-first approach; it's likely they won't maintain two separate configuration types in the future. For the legacy JavaScript-based configuration, follow this:

TailwindCSS v4 is backwards compatible with v3 - StackOverflow

Collectives™ on Stack Overflow

Adding Custom Font from local to Next.js 15 and Tailwind CSS 4

1 Answer 1

Solution: CSS-first configuration with `@theme` directive

Alternative: legacy JavaScript-based configuration

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Solution: CSS-first configuration with @theme directive

Alternative: legacy JavaScript-based configuration

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related

Solution: CSS-first configuration with `@theme` directive