TYPESCRIPT

add font in tailwindcss

//add neccessary font in globalstyled.css which is import in main file
//globalStyle.css
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@200;300;500;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,200;0,300;0,400;0,700;1,100;1,500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;800&family=Raleway:ital,wght@0,200;0,300;0,400;0,700;0,900;1,100;1,500&display=swap')
//in tailwind.config.js
module.exports = {
  content: ['./src/**/*.{js,jsx,ts,tsx}'],
  theme: {
    extend: {
      fontFamily: {
        Montserrat: ['Montserrat', 'sans-serif'],
        Raleway: ['Raleway', 'sans-serif'],
      }, //end of fontFamily
    },
  },
  plugins: [],
}


//and you can use in any where
<button className="font-Raleway">Learn how</button>

how to add custom font in tailwind css

//import the font into your CSS file using the @font-face CSS rule like so:
// globals.css
@tailwind base;
@tailwind components;
@tailwind utilities;

@font-face {
  font-family: "ADELIA";
  src: url("../public/fonts/ADELIA.otf");
}


// tailwind.config.js
module.exports = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {
      fontFamily: {
        poppins: ["Poppins", "sans-serif"],
        adelia: ["ADELIA", "cursive"],
      },
    },
  },
  plugins: [],
};

custom font family tailwind

// Main CSS file
// Add Google Fonts Import

// ---style.css---
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@500&display=swap');


// ---tailwind.config.js----
module.exports = {
  content: [],
  theme: {
    fontFamily: {
      // Add your custom fonts and enjoy.
      'Inter': ["Inter", "Sans-serif"]
    },
    extend: {},
  },
  plugins: [],
}