He leído diferentes temas sobre cómo usar fuentes autohospedadas con NextJS.
Lo que obtuve [ wait ] compiling ... cuando lo hice:
@font-face { font-family: 'montserrat'; src: url('./mypath/Montserrat-Medium.woff2') format('woff2'), url('./mypath/Montserrat-Medium.woff') format('woff'), url('./mypath/Montserrat-Medium.ttf') format('truetype'), url('./mypath/Montserrat-Medium.svg#Montserrat-Medium') format('svg'); }Sin error, o simplemente compilando... He leído ( stackoverflow/57590195 ) que dice que deberíamos usar una ruta estática como
@font-face { font-family: 'font'; src: url('./static/fonts/Montserrat-Medium.woff2') format('woff2'); }pero esa solución no funciona en absoluto. Casi parece funcionar bien, porque el error (o la espera imperiosa) se detiene. Pero si miras más de cerca, tu fuente no está cargada.
Luego probé fontfaceobserver, entendí rápidamente que el problema sería el mismo. Porque tiene que usar font-face y no puede usarlo con NextJS.
Después de descargar la siguiente fuente, leí el documento y miré los ejemplos de github .
Aquí está mi next.config.js inspirado en el suyo.
const withSass = require('@zeit/next-sass'); const withCSS = require("@zeit/next-css"); const withFonts = require('next-fonts'); module.exports = withFonts( withCSS( withSass({ enableSvg: true, webpack(config, options) { config.module.rules.push({ test: /\.(png|jpg|gif|svg|eot|ttf|woff|woff2)$/, use: { loader: 'url-loader', options: { limit: 100000 } } }); return config; } }) ) ); Mi camino a las fuentes public/static/fonts .
Y así es como traté de usarlo.
... function MainIndex() { ... return ( <> ... <style jsx>{` @font-face { font-family: 'Montserrat'; src: url('./static/fonts/Montserrat-Medium.ttf'); } h1 { font-family: 'Montserrat'; } `}</style> </> ) } ...Soluciones que encontré
dangerouslySetInnerHTML podría funcionar, pero supongo que no es la mejor solución. (No lo probé)Lea más sobre el problema de github
EDITAR:
Traté de adaptar lo que hizo Jesper We .
/public/static/fonts/fonts.css y /public/fonts/allMyfont.ttf y luego lo importé en _var.scss para usarlo con la variable sass @import "/public/static/fonts/fonts.css"; import style.scss my var $font e import "my/path/style.scss" a mi index.js (completando para siempre)
Después probé de una manera más cercana aún /public/static/fonts/fonts.css con mis fuentes en la misma carpeta. Luego en mi index.js. Pero ese no hace nada.
Aquí el código en vivo CodeSandBox
Esto es lo que suelo hacer:
Ponga las fuentes en público/estático en algún lugar
En la misma carpeta que las fuentes, coloque un archivo CSS donde se declaran las fuentes.
Ejemplo de archivo CSS /public/fonts/style.css :
@font-face { font-family: 'Italian No1'; src: url('ItalianNo1-Black.eot'); src: url('ItalianNo1-Black.eot?#iefix') format('embedded-opentype'), url('ItalianNo1-Black.woff2') format('woff2'), url('ItalianNo1-Black.woff') format('woff'); font-weight: 900; font-style: normal; } [ACTUALIZAR] Para las versiones recientes de NextJS, el lugar adecuado para importar el archivo CSS es una declaración de import en _app.js (ver documentos) .
Respuesta anterior:
Importe este css en _document.js ( docs ):
render() { return ( <Html> <Head> <link href="/fonts/style.css" rel="stylesheet"/> </Head> <body> <Main/> <NextScript/> </body> </Html> ) }He probado con la última versión de next.js "next": "10.0.8"
Se agregaron todas las fuentes a la carpeta public/fonts y se usaron en globals.css con fuentes.
Creo que las rutas que está utilizando en la fuente pueden no ser correctas, pero no estoy seguro de la estructura del código.
@font-face { font-family: 'Open Sans'; src: url('../public/fonts/OpenSans-Light.eot'); src: url('../public/fonts/OpenSans-Light.eot?#iefix') format('embedded-opentype'), url('../public/fonts/OpenSans-Light.woff2') format('woff2'), url('../public/fonts/OpenSans-Light.woff') format('woff'), url('../public/fonts/OpenSans-Light.ttf') format('truetype'); font-weight: 300; font-style: normal; font-display: swap; } Luego puedes usarla font-family: 'Open Sans'
Aquí hay una publicación de blog relacionada si desea leer más sobre
En v12.0.4 , usando tailwindcss, tuve que probar algunos cambios de fs, pero obtuve lo siguiente que funcionó. Además, utilicé fuentes personalizadas y fuentes de Google.
También puede probar sin viento de cola pero probando CSS global en línea:
# _app.js <div style={{ fontFamily: "Inter"}}> <Component {...pageProps} /> </div>import '../public/styles.css' # no funcionó fuera de public/
# styles.css # font files are in the same directory @font-face { font-family: 'Avenir'; src: url('avenir/avenir-light.woff') format('woff'); font-weight: 100; font-style: normal; } # tailwind.config.js theme: { extend: { fontFamily: { sans: ['Avenir', 'Inter', ...defaultTheme.fontFamily.sans], title: ['Avenir', 'Inter', ...defaultTheme.fontFamily.sans] } } }, # _document.js <Head> <link href="https://fonts.googleapis.com/css2?family=Inter&display=optional" rel="stylesheet" /> </Head>Sugerencia sagrada: en estos días, no es necesario que sirva varios archivos de fuentes, ya que las fuentes variables son ampliamente compatibles con el uso de un solo archivo. Además, el nuevo formato de fuente woff2 tiene una mejor relación de compresión y nuevamente es ampliamente compatible .
Coloque el archivo de fuente en la carpeta /public/fonts/
Agréguelo al archivo _document.tsx para que se obtenga para todas las páginas:
export default class MyDocument extends Document { render(): JSX.Element { return ( <Html> <Head> <link rel="preload" href="/fonts/inter-var-latin.woff2" as="font" type="font/woff2" crossOrigin="anonymous" /> </Head> ... @font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: optional; src: url(/fonts/inter-var-latin.woff2) format("woff2"); }next.config.json : module.exports = { async headers() { return [ { source: "/fonts/inter-var-latin.woff2", headers: [ { key: "Cache-Control", value: "public, max-age=31536000, immutable", }, ], }, ]; }, };Referencia: https://gourav.io/blog/nextjs-cheatsheet#add-custom-fonts