Nextjs में फ़ॉन्ट ttf फ़ाइल कैसे जोड़ें

Aug 17 2020

मैं नेक्स्टज के लिए नया हूं। मैं अपने कस्टम फोंट को अपने प्रोजेक्ट में जोड़ना चाहता हूं। मैं पूरी तरह से उलझन में हूं कि ऐसा कैसे किया जाए (मेरे फोंट "सार्वजनिक / फोंट /" में हैं)। मेरी Global.css फ़ाइल यह है-

html,
body {
  padding: 0;
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
    Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
}

a {
  color: inherit;
  text-decoration: none;
}

* {
  box-sizing: border-box;
}

@font-face {
  font-family: "Avenir";
  src: url("../public/fonts/AvenirNextRoundedStd-Demi.ttf");
  src: url("../public/fonts/AvenirNextRoundedStd-MedIt.ttf");
  src: url("../public/fonts/AvenirNextRoundedStd-Reg.ttf");
}

और यह मेरी अगली कॉन्फिग फ़ाइल है -

// next.config.js
const withCSS = require("@zeit/next-css");
module.exports = withCSS({
  /* config options here */
});

जवाब

1 GokhanSari Aug 17 2020 at 13:18

आपको publicनिर्देशिका के रूप में संदर्भित करना चाहिए /। तो, आपका सीएसएस कुछ इस तरह होना चाहिए:

@font-face {
  font-family: "Avenir";
  src: url("/fonts/AvenirNextRoundedStd-Demi.ttf");
  src: url("/fonts/AvenirNextRoundedStd-MedIt.ttf");
  src: url("/fonts/AvenirNextRoundedStd-Reg.ttf");
}

लेकिन मुझे लगता है कि आप फ़ॉन्ट के कई भार जोड़ने की कोशिश कर रहे हैं। तो, अपने सीएसएस इस तरह नहीं होना चाहिए?

body {
  font-family: "Avenir", sans-serif;
}


@font-face {
  font-family: "Avenir";
  font-weight: 400;
  src: url("/fonts/AvenirNextRoundedStd-Reg.ttf") format('truetype');
}

@font-face {
  font-family: "Avenir";
  font-weight: 500;
  src: url("/fonts/AvenirNextRoundedStd-MedIt.ttf") format('truetype');
}

@font-face {
  font-family: "Avenir";
  src: url("/fonts/AvenirNextRoundedStd-Demi.ttf") format('truetype');
  font-weight: 600;
}