“So fügen Sie benutzerdefinierte Schriftart in Rückenwind -CSS hinzu” Code-Antworten

Schriftart in Rückenwindcss hinzufügen

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

So fügen Sie benutzerdefinierte Schriftart in Rückenwind -CSS hinzu

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

Custom Font Family Rückenwind

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

Ähnliche Antworten wie “So fügen Sie benutzerdefinierte Schriftart in Rückenwind -CSS hinzu”

Fragen ähnlich wie “So fügen Sie benutzerdefinierte Schriftart in Rückenwind -CSS hinzu”

Weitere verwandte Antworten zu “So fügen Sie benutzerdefinierte Schriftart in Rückenwind -CSS hinzu” auf CSS

Durchsuchen Sie beliebte Code-Antworten nach Sprache

Durchsuchen Sie andere Codesprachen