Add Custom Font in Nextjs 14: A Step-by-Step Guide
Sandipan Das | 
Table Of Contents
Custom fonts can play a significant role in enhancing the visual appeal of your Next.js 14 project. In this blog post, we'll guide you through the process of adding custom fonts to your Next.js 14 application.
Step One: Install @next/font Package
yarn add @next/font
This package will enable you to import and use custom fonts easily in your Next.js 14 project.
Step Two: Integrate Fonts into Your Base Layout
Navigate to your base layout file, where you usually set up the overall structure of your application. Import the fonts you want to use by adding the following lines
import { Cinzel_Decorative, Playfair_Display } from "next/font/google";
const playfairDisplay = Playfair_Display({
subsets: ["latin"],
variable: "--font-playfairDisplay",
// weight: ["400", "700", "500", "800", "900"],
});
const cinzelDecorative = Cinzel_Decorative({
subsets: ["latin"],
variable: "--font-cinzelDecorative",
weight: ["400", "700", "900"],
});
Now, incorporate the font names into your HTML body tag:
<html lang="en"><body className={`${playfairDisplay.variable} ${cinzelDecorative.variable}`}>
{children}
</body></html>
Step Three: Extend Font Family in Tailwind CSS
Open your Tailwind CSS config file and extend the font family section as follows:
// tailwind.config.js
extend: {
fontFamily: {
"playfairDisplay": 'var(--font-playfairDisplay)',
"cinzelDecorative": 'var(--font-cinzelDecorative)',
},
// Other Tailwind CSS configurations...
},
This step ensures that Tailwind CSS recognizes and applies the custom fonts across your project.
Step Four: Utilize Custom Fonts in Your Components
Now, you can use the custom font classes anywhere in your components. For example:
<div className="col-span-12 lg:col-span-4 border shadow-xl group font-cinzelDecorative">
<!-- Your content goes here -->
</div>
Feel free to apply the custom font classes to various elements, giving your website a unique and personalized touch.
Congratulations! You've successfully added custom fonts to your Next.js 14 project. This simple enhancement can significantly impact the overall aesthetics of your website, making it stand out and leaving a lasting impression on your visitors. Experiment with different fonts and styles to find the perfect combination with your brand identity. Happy coding!
