Cómo agregar un archivo ttf de fuente en nextjs
Aug 17 2020
Soy nuevo en Nextjs. Quiero agregar mis fuentes personalizadas a mi proyecto. Estoy totalmente confundido acerca de cómo hacer eso (mis fuentes están en "public / fonts /"). mi archivo global.css es este-
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");
}
y este es mi próximo archivo de configuración -
// next.config.js
const withCSS = require("@zeit/next-css");
module.exports = withCSS({
/* config options here */
});
Respuestas
1 GokhanSari Aug 17 2020 at 13:18
Debe hacer referencia al public
directorio como /
. Entonces, su CSS debería ser algo como esto:
@font-face {
font-family: "Avenir";
src: url("/fonts/AvenirNextRoundedStd-Demi.ttf");
src: url("/fonts/AvenirNextRoundedStd-MedIt.ttf");
src: url("/fonts/AvenirNextRoundedStd-Reg.ttf");
}
Pero creo que está intentando agregar varios pesos de la fuente. Entonces, ¿no debería ser tu CSS así?
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;
}