256 KiB
How to Set Up a Font in Fast NPocket Using Tailwind
Setting up a font in Fast NPocket involves configuring the Tailwind CSS framework and updating the layout files. This guide will walk you through the process step-by-step.
Choosing a Font
To begin, visit Google Fonts to select a font that suits your project. Keep in mind that not all fonts are available in the Next library, so you might need to experiment to find one that works.
Setting Up Tailwind Config
Once you've chosen your font, you'll need to define it in the Tailwind config file. For example, you might choose Roboto as your heading font and Indie Flower as your body font. The configuration would look like this:
const roboto = Roboto({
variable: "--heading-font",
weight: "500",
subsets: ["latin"],
});
const indieFlower = Indie_Flower({
variable: "--body-font",
weight: "400",
subsets: ["latin"],
});
Updating the Layout File
If you decide to swap fonts, this can be easily done in the layout file. For instance, if you want to change the body font to Roboto and the heading font to Indie Flower, you can update the variables accordingly:
export default async function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
const isUserLoggedIn = await isAuthenticated(cookies());
return (
<html lang="en" className={`${indieFlower.variable} ${roboto.variable}`}>
<body className="bg-base-100 flex font-body">
<ThemeProvider>
<Header isUserLoggedIn={isUserLoggedIn} />
{children}
<ToastContainer
position="bottom-left"
autoClose={5000}
hideProgressBar={false}
newestOnTop={false}
closeOnClick
rtl={false}
pauseOnFocusLoss
draggable
pauseOnHover
/>
</ThemeProvider>
</body>
</html>
);
}