Next.js Discord

Discord Forum

Fonts not loading or applying

Answered
Iridescent shark posted this in #help-forum
Open in Discord
Iridescent sharkOP
Hi, my intent is to have two fonts—one for titles and one as primary text. I've set it all up but it doesn't seem to have an effect on my text... I've put two buttons here which are supposed to have different fonts but appear to just have the default font it falls back onto.

I've configured it like so:
layout
import { Source_Code_Pro, Source_Sans_3 } from "next/font/google";

const sourceCodePro = Source_Code_Pro({
    subsets: ["latin"],
    variable: "--font-code",
});

const sourceSansPro = Source_Sans_3({
    subsets: ["latin"],
    weight: ["400", "700", "800"],
    variable: "--font-sans",
});

// ...

<body className={`${sourceCodePro.variable} ${sourceSansPro.variable} antialiased`}>{children}</body>


tailwind.config:
fontFamily: {
  "primary": "var(--font-code)",
  "title": "var(--font-sans)",
}


in my home page:
<span className="(...) font-title">Go to Mathematics</span>
<span className="(...) font-primary">Go to Physics</span>


Am I missing something here? How could I debug this?
Answered by Yi Lon Ma
https://tailwindcss.com/docs/font-family#customizing-your-theme
View full answer

10 Replies

Yi Lon Ma
using tailwind v4 by any chance?
Iridescent sharkOP
Yep
Yi Lon Ma
tailwind config file is deprecated in v4
Iridescent sharkOP
Oh really... What should I use instead?
Answer
Iridescent sharkOP
And then do I use @import or can I somehow do it via next/font?
Yi Lon Ma
your next/font stuff is correct
you just need to use the @theme inside your globals.css
and it should work
Iridescent sharkOP
Ah yay it works now, thanks a lot :)
I was worries something was broken but I just mistyped something haha