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

#nextjs #customfonts #configure #development

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! 🚀✨