Error while trying to add external local fonts in nextJS

huangapple go评论67阅读模式
英文:

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

huangapple
  • 本文由 发表于 2023年2月14日 02:27:22
  • 转载请务必保留本文链接:https://go.coder-hub.com/75439877.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定