英文:
Error while trying to add external local fonts in nextJS
问题
我正在尝试将本地字体添加到我的NextJS + TailwindCSS项目中。
我已经将字体添加到public/fonts文件夹中,并按照文档进行操作:
这是我的代码
import localFont from '@next/font/local'
const inter = Inter({
subsets: ['latin'],
})
const recoleta = localFont({
src: 'fonts/Recoleta-Regular.ttf',
fontFamily: 'Recoleta',
})
但是从终端中出现了以下错误。
我需要帮助确定应该将它添加到哪个文件夹,或者如何完美地进行配置。
找不到模块: 无法解析 './fonts/Recoleta-Regular.ttf';
英文:
I'm trying to add local font to my NextJS + TailwindCSS project.
I have added the font inside public/fonts folder and I'm following the docs:
This is my code
import localFont from '@next/font/local'
const inter = Inter({
subsets: ['latin'],
})
const recoleta = localFont({
src: 'fonts/Recoleta-Regular.ttf',
fontFamily: 'Recoleta',
})
And I'm getting this error from the terminal.
I need help on which folder to add it or how to configure it perfectly.
Module not found: Can't resolve './fonts/Recoleta-Regular.ttf'
答案1
得分: 4
抱歉,代码部分无法提供翻译。以下是非代码部分的翻译:
"Had this error and fixed the issue by setting it up as such. Used https://nextjs.org/docs/api-reference/next/font#src for assistance.
Using app folder."
"page.tsx:"
"tailwind.config.js:"
英文:
Had this error and fixed the issue by setting it up as such. Used https://nextjs.org/docs/api-reference/next/font#src for assistance.
Using app folder.
page.tsx:
import CustomFont from '@next/font/local'
const cfont = CustomFont({
src: '../public/fonts/cfont.ttf',
variable: '--font-cfont',
})
export default function Home() {
return (
<div className={`${cfont.variable}`}>
<div className="font-cfont">
Test
</div>
</div>
)
}
tailwind.config.js:
const { fontFamily } = require('tailwindcss/defaultTheme')
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
"./app/**/*.{js,ts,jsx,tsx}",
"./pages/**/*.{js,ts,jsx,tsx}",
"./components/**/*.{js,ts,jsx,tsx}",
],
theme: {
extend: {
fontFamily: {
cfont: ['var(--font-cfont)', ...fontFamily.sans],
},
},
},
plugins: [],
}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论