Fonts with Tailwind 4 | Next.js | Page 1

dapper peak Mar 12, 2025, 4:28 PM

#

What is the proper way to be importing fonts? All the tutorials I've seen have been for Tailwind 3 and since everything is supposed to be inside global.css now with the removal of tailwind.config.js. I can't seem to figure out how to use the next font package.

formal oliveBOT Mar 12, 2025, 4:28 PM

#

Post created!

🔎 This post has been indexed in our web forum and will be seen by search engines so other users can find it outside Discord

🕵️ Your user profile is private by default and won't be visible to users outside Discord, if you want to be visible in the web forum you can add the "Public Profile" role in id:customize

✅ You can mark a message as the answer for your post with Right click -> Apps -> Mark Solution
(if you don't see the option, try refreshing Discord with Ctrl + R)

frail turtle Mar 12, 2025, 5:30 PM

#

dapper peak What is the proper way to be importing fonts? All the tutorials I've seen have b...

https://tailwindcss.com/docs/font-family

font-family - Typography

Utilities for controlling the font family of an element.

dapper peak Mar 12, 2025, 5:30 PM

#

frail turtle https://tailwindcss.com/docs/font-family

I've read the docs

frail turtle Mar 12, 2025, 5:32 PM

#

... Let me show you how I do it.

#

import { Playfair_Display, Montserrat } from "next/font/google";

export const playfair_display = Playfair_Display({
  variable: "--font-playfair-display",
  subsets: ["latin"],
  weight: ["400", "600", "800"],
  style: ["normal", "italic"],
  display: "swap",
  adjustFontFallback: true,
  preload: true,
});

export const montserrat = Montserrat({
  variable: "--font-montserrat",
  subsets: ["latin"],
  weight: ["200", "300", "400", "500", "600"],
  style: ["normal", "italic"],
  display: "swap",
  adjustFontFallback: true,
  preload: true,
});

#

import { playfair_display, montserrat } from "./fonts";

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
      <html
        suppressHydrationWarning
        suppressContentEditableWarning
      >
        {env.NODE_ENV == "development" && (
          <script
            async
            src="//unpkg.com/react-scan/dist/auto.global.js"
          ></script>
        )}
        <body
          className={`${playfair_display.variable} ${montserrat.variable} antialiased`}
        >  
          {children}
        </body>
      </html>
  );
}

dapper peak Mar 12, 2025, 5:35 PM

#

Okay so there's basically no way to use tailwind for nextjs fonts anymore?

frail turtle Mar 12, 2025, 5:35 PM

#

@import "tailwindcss";
@theme {
  /* Fonts */
  --font-playfair-display: var(--font-playfair-display);
  --font-montserrat: var(--font-montserrat);
}

frail turtle Mar 12, 2025, 5:36 PM

#

dapper peak Okay so there's basically no way to use tailwind for nextjs fonts anymore?

If you can, you have to use CSS to import the fonts.

#

and

#

As you can see in the example of my global.css define them in theme as variables with the prefix font-<name-font-here>

#

that's all

dapper peak Mar 12, 2025, 5:37 PM

#

I did exactly this last night and was not getting the same results let me double check to make sure I didn't mess it up anywhere

frail turtle Mar 12, 2025, 5:38 PM

#

Okey

dapper peak Mar 12, 2025, 5:46 PM

#


import "@/styles/globals.css";
import { Figtree } from "next/font/google";
import type { AppProps } from "next/app";

export const figtree = Figtree({
  variable: "--font-figtree",
  subsets: ["latin"],
  weight: ["500"],
  preload: true,
});

export default function App({ Component, pageProps }: AppProps) {
  return (
    <main className={`${figtree.variable}`}>
      <Component {...pageProps} />;
    </main>
  )
}


@theme {
  --font-figtree: var(--font-figtree);
}```

Am I doing something wrong here?

frail turtle Mar 12, 2025, 5:47 PM

#

No, it's okay

dapper peak Mar 12, 2025, 5:47 PM

#

It's still not working thinkies

frail turtle Mar 12, 2025, 5:47 PM

#

Is the result as expected or is there some strange behavior?

frail turtle Mar 12, 2025, 5:47 PM

#

dapper peak It's still not working <:thinkies:591480689057071132>

check the devtools (network side)

#

Check if the font is downloading.

dapper peak Mar 12, 2025, 5:48 PM

#

Alright one second

#

Doesn't look like the font is downloading

#

wait no it might be i actually can't tell the woff2 it's downloading has some arbitrary name

frail turtle Mar 12, 2025, 5:52 PM

#

dapper peak Doesn't look like the font is downloading

Okay, try other fonts (you don't have to use a specific one). We'll see if the same behavior persists with others.

frail turtle Mar 12, 2025, 5:53 PM

#

dapper peak wait no it might be i actually can't tell the woff2 it's downloading has some ar...

That should be handled by next.js by default, as far as I know.

dapper peak Mar 12, 2025, 5:56 PM

#


import "@/styles/globals.css";
import { Figtree } from "next/font/google";
import type { AppProps } from "next/app";

import { Playfair_Display } from "next/font/google";

export const playfair_display = Playfair_Display({
  variable: "--font-playfair-display",
  subsets: ["latin"],
  weight: ["400", "600", "800"],
  style: ["normal", "italic"],
  display: "swap",
  adjustFontFallback: true,
  preload: true,
});
export const figtree = Figtree({
  variable: "--font-figtree",
  subsets: ["latin"],
  weight: ["500"],
  preload: true,
});

export default function App({ Component, pageProps }: AppProps) {
  return (
    <main className={`${playfair_display.variable}`}>
      <Component {...pageProps} />;
    </main>
  )
}

#

Same issue

#

This is all that's needed inside the global.css file right?

@theme {
  --font-figtree: var(--font-figtree);
  --font-playfair-display: var(--font-playfair-display);
}```

frail turtle Mar 12, 2025, 5:57 PM

#

Can you show me your package.json? (only the vital stuff please)

frail turtle Mar 12, 2025, 5:57 PM

#

dapper peak This is all that's needed inside the global.css file right? ```css @theme { -...

ye

#

in global.css

#

AH

#

AH

#

AH

#

AH

#

AH

#

AH

dapper peak Mar 12, 2025, 5:57 PM

#

AH

frail turtle Mar 12, 2025, 5:57 PM

#

dapper peak ```typescript import "@/styles/globals.css"; import { Figtree } from "next/font...

Don't tell me you're importing globals.css and you have global.css? XDDD

dapper peak Mar 12, 2025, 5:58 PM

#

Oh no lmao

#

I wish that was the case though

#

You had me sweating for a second there

#

  "dependencies": {
    "react": "^19.0.0",
    "react-dom": "^19.0.0",
    "next": "15.2.2"
  },
  "devDependencies": {
    "typescript": "^5",
    "@types/node": "^20",
    "@types/react": "^19",
    "@types/react-dom": "^19",
    "@tailwindcss/postcss": "^4",
    "tailwindcss": "^4",
    "eslint": "^9",
    "eslint-config-next": "15.2.2",
    "@eslint/eslintrc": "^3"
  }```

frail turtle Mar 12, 2025, 5:58 PM

#

dapper peak You had me sweating for a second there

x2

frail turtle Mar 12, 2025, 6:00 PM

#

dapper peak ```json "dependencies": { "react": "^19.0.0", "react-dom": "^19.0.0", ...

Looks good, have you migrated to the tailwind client?

$ npx @tailwindcss/upgrade

Just to make sure it's not a tailwind migration error.

#

(I've had problems with the migration client)

dapper peak Mar 12, 2025, 6:01 PM

#

This is my first time messing with next so idk for sure but is this importing the variable as intended?

frail turtle Mar 12, 2025, 6:02 PM

#

dapper peak This is my first time messing with next so idk for sure but is this importing th...

ye

dapper peak Mar 12, 2025, 6:03 PM

#


@tailwindcss/upgrade@4.0.13
Ok to proceed? (y) y

≈ tailwindcss v4.0.13

│ Git directory is not clean. Please stash or commit your changes before migrating.

│ You may use the `--force` flag to silence this warning and perform the migration.```

I should continue with this then?

frail turtle Mar 12, 2025, 6:03 PM

#

It seems to work except it doesn't show the font family. This is because the variable is specified, but you haven't used it, right? You can put it inside your elements. In case you've already tried it and it doesn't work for testing, create a test project by just importing the fonts and seeing if the behavior is different.

frail turtle Mar 12, 2025, 6:04 PM

#

dapper peak ``` @tailwindcss/upgrade@4.0.13 Ok to proceed? (y) y ≈ tailwindcss v4.0.13 │ ...

If you already have Tailwind 4, there is no need to upgrade further, it's a strange error.

#

v4 is now the stable version so I would say stay there

#

(Unless you see something that prompts you to move to the latest version.)

dapper peak Mar 12, 2025, 6:05 PM

#

Alright

#

I'll try and make a new project see if I have same error

#

I assume usig Turbopack and not having a AppRouter shouldn't be the cause to this issue right?

frail turtle Mar 12, 2025, 6:07 PM

#

dapper peak I assume usig Turbopack and not having a AppRouter shouldn't be the cause to thi...

No problem at all unless you have a specific configuration on your part (own experience).

frail turtle Mar 12, 2025, 6:07 PM

#

dapper peak I'll try and make a new project see if I have same error

okey

dapper peak Mar 12, 2025, 6:12 PM

#

Okay so seems like it's functioning the same. I kept everything as default:

import "@/styles/globals.css";
import type { AppProps } from "next/app";

import { Playfair_Display } from "next/font/google";

export const playfair_display = Playfair_Display({
  variable: "--font-playfair-display",
  subsets: ["latin"],
  weight: ["400", "600", "800"],
  style: ["normal", "italic"],
  display: "swap",
  adjustFontFallback: true,
  preload: true,
});

export default function App({ Component, pageProps }: AppProps) {
  return (
    <main className={`${playfair_display.variable}`}>
      <p>test</p>
      <Component {...pageProps} />;
    </main>
  )
}

@import "tailwindcss";

:root {
  --background: #ffffff;
  --foreground: #171717;
}

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --font-sans: var(--font-geist-sans);
  --font-mono: var(--font-geist-mono);
}

@theme {
  --font-playfair-display: var(--font-playfair-display);
}

@media (prefers-color-scheme: dark) {
  :root {
    --background: #0a0a0a;
    --foreground: #ededed;
  }
}

body {
  background: var(--background);
  color: var(--foreground);
  font-family: Arial, Helvetica, sans-serif;
}

#

However when I used this format it worked: <div className="font-[family-name:var(--font-playfair-display))]">

frail turtle Mar 12, 2025, 6:20 PM

#

dapper peak However when I used this format it worked: `<div className="font-[family-name:va...

it's very strange

dapper peak Mar 12, 2025, 6:20 PM

#

Yeah very

#

I guess I'll just go with this for now

frail turtle Mar 12, 2025, 6:21 PM

#

I suggest you ask for help on the tailwind forum. So far, we've tested next.js and it hasn't had any issues. Tailwind just has a strange problem when declaring custom font variables.

#

Thank you for sharing the details calmly.

dapper peak Mar 12, 2025, 6:24 PM

#

Alright I'll do that whenever I find the time. Thanks for the help I appreciate it

#Fonts with Tailwind 4