Breaking News: Grepper is joining You.com. Read the official announcement!

add font in tailwindcss

Add Answer

Shirshak Kandel answered on February 14, 2022 Popularity 10/10 Helpfulness 8/10

answer add font in tailwindcss

related how to add custom font in tailwind css

related custom font family tailwind

add font in tailwindcss

Comment

//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>

Popularity 10/10 Helpfulness 8/10 Language typescript

Source: Grepper

Tags: add tailwind-css typescript

Link to this answer
Share Copy Link

Contributed on Feb 14 2022

Shirshak Kandel

0 Answers Avg Quality 2/10

Closely Related Answers

how to add custom font in tailwind css

Comment

//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: [],
};

Popularity 10/10 Helpfulness 5/10 Language css

Source: Grepper

Tags: add

Link to this answer
Share Copy Link

Contributed on Jun 11 2022

Shirshak Kandel

0 Answers Avg Quality 2/10

custom font family tailwind

Comment

// 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: [],
}

Popularity 10/10 Helpfulness 5/10 Language javascript

Source: Grepper

Tags: javascript j

Link to this answer
Share Copy Link

Contributed on Mar 23 2022

Rohan Kiratsata

0 Answers Avg Quality 2/10

add font in tailwindcss

Contents

More Related Answers

add font in tailwindcss

Closely Related Answers

how to add custom font in tailwind css

custom font family tailwind

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.