วิธีเพิ่มไฟล์ ttf แบบอักษรใน nextjs

Question

ฉันยังใหม่กับ Nextjs ฉันต้องการเพิ่มแบบอักษรที่กำหนดเองในโครงการของฉัน ฉันสับสนโดยสิ้นเชิงเกี่ยวกับวิธีการทำเช่นนั้น (แบบอักษรของฉันอยู่ใน "สาธารณะ / แบบอักษร /") ไฟล์ 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 */
});

Answer 1

คุณควรดูไดเรกทอรีเป็นpublic /ดังนั้น CSS ของคุณควรเป็นดังนี้:

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

แต่ฉันคิดว่าคุณกำลังพยายามเพิ่มน้ำหนักตัวอักษรหลาย ๆ ดังนั้น CSS ของคุณไม่ควรเป็นแบบนี้หรือ?

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;
}