Selecting the required fonts#
- Add the required fonts from NextJS to your layout file.
- For me i have added my fonts on a seperate
fonts.ts
file, but you can add the fonts directly to the layout file
// fonts.ts
import { Inter, Poppins } from "next/font/google";
export const poppins = Poppins({
weight: ["400", "600"],
subsets: ["latin"],
variable: "--font-poppins",
});
export const inter = Inter({
subsets: ["latin"],
variable: "--font-inter",
});
- The Poppins font is not a variable font, so we need to manually include the required font weights.
On the other hand, Inter is a variable font, allowing it to adapt to any font weight as needed without requiring separate font-weight files.
Adding the fonts to layout.tsx file#
// layout.tsx
import { inter, poppins } from "@/lib/fonts";
export default function RootLayout({
children,
}: {
children: React.ReactNode,
}) {
return (
<html lang="en">
<body className={`${inter.className} ${poppins.variable}`}>
{children}
</body>
</html>
);
}
- Here I need the inter font to be applied on my entire nextjs application. we are adding the taiwind generated classname of the
inter
font. - But for poppins I want the font to be loaded as a CSS variable
Adding CSS Variable#
- Notice on the
fonts.ts
file we have provided a variable
name. we can use that on the globals.css
- On tailwind v4, they removed the config file and everything is simple and can be added from
globals.css
itself.
--font-poppins: var(--font-poppins);
- Add the css code like this and now you can use
font-poppins
classname on any element. - For example, adding the classname like this will apply the font styles.
<div className="font-poppins container