尝试在nextJS中添加外部本地字体时出错

Question

我正在尝试将本地字体添加到我的 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',
})

我从终端收到此错误。

我需要有关添加哪个文件夹或如何完美配置它的帮助。

Module not found: Can't resolve './fonts/Recoleta-Regular.ttf'

Answer 1

出现此错误并通过这样的设置解决了问题。使用 https://nextjs.org/docs/api-reference/next/font#src 寻求帮助。 使用应用程序文件夹。

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: [],
}

Answer 2

如果有人在第一次运行 NextJs 应用程序时遇到此问题。 将此命令粘贴到终端中。

npx @next/codemod 内置下一个字体

使用以下链接作为参考。 https://nextjs.org/docs/messages/built-in-next-font