nextjs에서 글꼴 ttf 파일을 추가하는 방법

Question

저는 Nextjs를 처음 사용합니다. 내 프로젝트에 사용자 정의 글꼴을 추가하고 싶습니다. 어떻게해야하는지 완전히 혼란 스럽습니다 (내 글꼴은 "public / fonts /"에 있습니다). 내 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;
}