“Como adicionar fonte personalizada no Tailwind CSS” Respostas de código

Adicionar fonte em 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>
Shirshak kandel

Como adicionar fonte personalizada no 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: [],
};

Shirshak kandel

Família de fonte personalizada 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: [],
}
Rohan Kiratsata

Respostas semelhantes a “Como adicionar fonte personalizada no Tailwind CSS”

Perguntas semelhantes a “Como adicionar fonte personalizada no Tailwind CSS”

Mais respostas relacionadas para “Como adicionar fonte personalizada no Tailwind CSS” em CSS

Procure respostas de código populares por idioma

Procurar outros idiomas de código