[v4] Using next/font variables in the theme config
#15267
-
|
I'm trying to utilize my fonts from // globals.css
@import 'tailwindcss';
@theme {
--font-heading: var(--font-unbounded);
--font-sans: var(--font-montserrat);
}// layout.tsx
const unbounded = Unbounded({
subsets: ['latin'],
variable: '--font-unbounded',
})
const montserrat = Montserrat({
subsets: ['latin'],
variable: '--font-montserrat',
})
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode
}>) {
return (
<html lang="en">
<body className={`${unbounded.variable} ${montserrat.variable} antialiased`}>{children}</body>
</html>
)
}// page.tsx
export default function Home() {
return (
<main>
<h1 className="font-heading">Test heading</h1>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Illum,
provident.
</p>
</main>
);
}
EDIT: re-read the discussion post and found out that was more of a media query issue, heh 
In this case, how can I go about using fonts from |
Beta Was this translation helpful? Give feedback.
Replies: 2 comments 1 reply
-
|
Try altering your CSS like: -@theme {
+@theme inline {
--font-heading: var(--font-unbounded);
--font-sans: var(--font-montserrat); |
Beta Was this translation helpful? Give feedback.
-
|
Instead of setting the variable classes on the body tag, put them on the html tag 👍🏻 |
Beta Was this translation helpful? Give feedback.
-
|
thank you adam 🙏 |
Beta Was this translation helpful? Give feedback.
Instead of setting the variable classes on the body tag, put them on the html tag 👍🏻