So fügen Sie eine Schriftart-ttf-Datei in nextjs hinzu

Question

Ich bin neu bei Nextjs. Ich möchte meine benutzerdefinierten Schriftarten zu meinem Projekt hinzufügen. Ich bin total verwirrt darüber, wie das geht (meine Schriften befinden sich in "public / fonts /"). meine global.css Datei ist dies-

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

und das ist meine nächste Konfigurationsdatei -

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

Answer 1

Sie sollten sich auf das publicVerzeichnis als beziehen /. Ihr CSS sollte also ungefähr so ​​aussehen:

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

Aber ich denke, Sie versuchen, mehrere Schriftstärken hinzuzufügen. Sollte Ihr CSS nicht so sein?

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