Elevate Your Typography: Adding Custom Fonts in Next.js 13 with Tailwind CSS

Adding Custom Fonts in Next.js 13 with Tailwind CSS

Before we dive into the process of adding custom fonts, make sure you have the following prerequisites in place:

• Next.js 13 Project: Ensure you have a Next.js 13 project set up and ready for customization.

• Custom Font Files: Obtain the .woff, .woff2, or .ttf font files that you want to use. Make sure you have the appropriate licensing for the fonts.
  Okk so let's go!!

• Step 1: Organize Your Fonts
  Create a folder within your public directory. Naming it 'fonts' is a common convention
  

|-- app/
|-- styles/
|-- public/fonts/  <-- Place your custom font files here
|-- ...

• Step 2: Import Fonts in your CSS file (Note: we will setup in our global.css file but you can setup with other css file with same process) In your project's 'app' directory, open global.css file and define the @font-face rule to import your custom fonts:

//app/globals.css

@font-face {
  font-family: 'limelight';
  font-style: regular;
  font-weight: 400;
  src: url('/fonts/Limelight-Regular.ttf') format('truetype'); // mention format of your font
}

• Step 3: Open tailwind.config.ts/js file and configure you custom font-family.

// tailwind.config.ts
module.exports = {
  // ...other configuration...

  extend: {
    fontFamily: {
     limelight: ['limelight', 'sans-serif'],
    },
  },
}

And that's it can you your limelight font-family in anywhere in your project.
i.e

import React from 'react';

const index: React.FC = () => {
  return (
    <p className="font-limelight text-2xl">Thanks for Reading</p>
  );
};

export default index;

That's it all configurations are done for setting up the custom fonts in Next.js projects in optimize way.
Thanks for reading buddy see you soon!!
Happy coding! 🚀✨