Add Custom Fonts to tailwindcss

Go here https://fonts.google.com/ and copy link tags of whatever font you want.

Add those links to the index.html file

 <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Inter:wght@300&family=Lora:wght@400;600&family=Nerko+One&family=Poppins:wght@300&display=swap"
      rel="stylesheet"
    />

Here I have added Poppins font.

To apply the font family to the entire application go to index.css and add to body.

@layer base {
  body {
    font-family: "Poppins";
  }
}

Or To get complete control over fonts we can add to the utility class.

 theme: {
    extend: {
      fontFamily: {
        poppins: "Poppins",
      },
    },
  }

<h1 className="font-poppins">Counter</h1>

Therefore we can add it any where using this class name.