Next.js Discord

Discord Forum

Custom fonts in Nextjs 15 + Tailwind 4

Answered
pearce posted this in #help-forum
Open in Discord
pearceOP
In the boilerplate that comes with Next 15.2.0 I saw that the custom Geist font is being selected with 
font-[family-name:var(--font-geist-sans)]
. Is this the recommended way? Any tips on how to set up fonts with 15 + tailwind 4 would be greatly appreciated 🙂
Answered by pearce
[Referencing other variables needs to be done inline?](https://tailwindcss.com/docs/theme#referencing-other-variables)

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


This is working. I had to turn off Turbopack too, kept locking up whenever I made changes to 
globals.css
View full answer

2 Replies

Transvaal lion
I'm importing some woff2 fonts that are not supported by next/font and just put them in my CSS.
Then I just declared a variable and applied it on the body.
/* globals.css */
@import "tailwindcss";
@import "./fonts.css";

@theme {
    --font-*: initial;
    --font-body: 'myfont', sans-serif;
}

@layer base {
    html, body {
        font-family: var(--font-body);
    }
}

This is how I do it
pearceOP
[Referencing other variables needs to be done inline?](https://tailwindcss.com/docs/theme#referencing-other-variables)

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


This is working. I had to turn off Turbopack too, kept locking up whenever I made changes to 
globals.css
Answer