Add Custom Font in Nextjs 14: A Step-by-Step Guide

twitterfacebooklinkedinpinterestW

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!

twitterfacebooklinkedinpinterestW

Thanks for checking out my portfolio!

I really enjoy programming—it's not just my job, it's something I love. I've finished lots of web projects using different tools, and I'm excited to share what I know with everyone and help out.

I know my way around ReactJS, NextJS, MongoDB, WordPress, Laravel, CodeIgniter, and making things look good (UI/UX). I'm also a quick learner, always ready to learn and grow in my field.

If you've got any questions or need some help, feel free to get in touch anytime.

Best regards,

SANDIPAN DASFull Stack Web Developer

Let‘s collaborate
on your next project

Schedule a Zoom Meeting