# Overview So, your Next.js site comes with a default set of fonts – a decent start, but let's admit it, we all yearn for a touch of individuality, right? In this casual yet informative tutorial, we're uncovering the secrets to elevate your Next.js site with fonts that resonate with your unique style. We're diving into the world of custom fonts – the ones that align seamlessly with your site's personality. In this guide, we'll walk through the process of seamlessly incorporating custom fonts into your Next.js site, harnessing the power of the **next/font** package and Tailwind CSS. Get ready for a hands-on journey as we navigate a series of essential configuration steps: - **Loading Fonts from Google Fonts:** We'll delve into the intricacies of using **next/font/google** to fetch fonts from the expansive Google Fonts library. This step lays the foundation for infusing your site with a diverse range of typographic styles. - **Creating Custom Font Families in Tailwind Config:** With our CSS variables in hand, let's dive into your Tailwind config. Discover how to use these variables to create unique font styles. This ensures that the fonts on your Next.js site look well-organized and seamlessly blend together for a smooth and unified typographic vibe. - **Using custom fonts Inside components** With the tailwind configurations for custom fonts we will see how we can use the custom fonts in our components with ease. But wait, there's more! - **Local Font Files with next/font/local:** As an added bonus, discover how to leverage **next/font/local** to seamlessly integrate local font files into your project. This ensures that your custom font choices are not only diverse but also accessible even when offline. Get ready to elevate your Next.js site's visual appeal with the finesse of tailored typography. Let's dive in, step by step, and make your web design truly stand out! 🎨🔠 # Loading Fonts from Google Fonts In your **_app.jsx/tsx** file (or **layout.tsx/jsx** if you're using the app router), bring in the fonts you want from **next/font/google**. Utilize the **variable** configuration prop to specify the variable name you want to use. This variable will help generate a CSS **--var** for each font. Additionally, if you have specific font weights in mind, go ahead and define them. Here's a glimpse of how your code will shape up: ```typescript // app/layout.tsx // Import Poppins font from next/font/google import { Poppins } from "next/font/google"; // Define Poppins font with specific configurations const poppins = Poppins({ subsets: ["latin"], display: "swap", variable: "--font-poppins", // you can use the 'poppins' variable in your styles or components weight: ["100", "200", "300", "400", "500", "600", "700", "800", "900"], }); ``` After creating the Poppins font, it's time to integrate it into your **body** tag. Use the variable name you assigned when defining the font. ```typescript ``` So with all this your final layout.tsx will look like this. ```typescript "use client"; // Import the Poppins font from next/font/google import { Poppins } from "next/font/google"; import Navbar from "@/components/Navbar"; import Footer from "@/components/Footer"; import "./globals.css"; // Define Poppins font with specific configurations const poppins = Poppins({ subsets: ["latin"], display: "swap", variable: "--font-poppins", weight: ["100", "200", "300", "400", "500", "600", "700", "800", "900"], }); // RootLayout component export default function RootLayout({ children, }: { children: React.ReactNode; }) { return ( {/* Apply the Poppins font to the body tag */} {children}

How to Add Custom Fonts in Next.js with Tailwind CSS