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

Tailwind Custom Font

Add Answer

Professional snake killer answered on February 14, 2022 Popularity 10/10 Helpfulness 2/10

answer Tailwind Custom Font

related add font in tailwindcss

related how to add custom font in tailwind css

related custom font family tailwind

related tailwind font normal style

Tailwind Custom Font

Comment

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      fontFamily: {
        customFont: ['"Custom Font"', "sans-serif"],
        // Add more custom font families as needed
      },
    },
  },
  // Other Tailwind configuration settings
};

Popularity 10/10 Helpfulness 2/10 Language javascript

Source: Grepper

Tags: custom-font javascript

Link to this answer
Share Copy Link

Contributed on May 31 2024

Professional snake killer

0 Answers Avg Quality 2/10

Closely Related Answers

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 7/10 Language typescript

Source: Grepper

Tags: add

Link to this answer
Share Copy Link

Contributed on Feb 14 2022

Shirshak Kandel

0 Answers Avg Quality 2/10

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

tailwind font normal style

Comment

---------------|---------------------
Class          |  Properties
---------------|---------------------
italic	       |  font-style: italic;
not-italic     |  font-style: normal;
---------------|---------------------
font-bold      | font-weight: 700;
font-extrabold | font-weight: 800;
font-black     | font-weight: 900;

Popularity 10/10 Helpfulness 2/10 Language html

Source: Grepper

Tags: html

Link to this answer
Share Copy Link

Contributed on Mar 31 2022

KostasX

0 Answers Avg Quality 2/10

Tailwind Custom Font

Contents

More Related Answers

Tailwind Custom Font

Closely Related Answers

add font in tailwindcss

how to add custom font in tailwind css

custom font family tailwind

tailwind font normal style

Grepper

Documentation

Social

Legal

Contact

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