Next.js 13+Tailwind项目添加自定义本地字体失败及多字体配置

一、单字体配置错误原因 #

你的配置存在两处核心不匹配：

1. 字体变量名不一致：_app.js中定义的字体变量是--font-surt-bold，但tailwind.config.js里引用的是var(--font-surt)，名称不对应导致Tailwind无法识别字体。
2. Tailwind字体族未定义：组件中使用了font-surt-bold类，但你仅在Tailwind配置里扩展了sans字体族，未单独定义surt-bold字体族。

二、修正单字体配置 #

1. 更新 /pages/_app.js #

保持变量名统一，文件路径无需修改（放在/pages/fonts下，相对路径正确）：

import localFont from '@next/font/local'

const surtBold = localFont({
  src: './fonts/Surt-Normal-Bold.woff2',
  variable: '--font-surt-bold',
})

export default function MyApp({ Component, pageProps }) {
  return (
    <main className={surtBold.variable}>
      <Component {...pageProps} />
    </main>
  )
}

2. 更新 tailwind.config.js #

添加surt-bold字体族，对应定义的变量：

const { fontFamily } = require('tailwindcss/defaultTheme')

module.exports = {
  content: [
    './pages/**/*.{js,ts,jsx,tsx}',
    './components/**/*.{js,ts,jsx,tsx}',
  ],
  theme: {
    extend: {
      fontFamily: {
        'surt-bold': ['var(--font-surt-bold)', ...fontFamily.sans],
      },
    },
  },
  plugins: [],
}

此时组件中的font-surt-bold类即可正常加载粗体字体。

三、添加多字体（含不同字重、斜体） #

更高效的方式是将同一字体家族的不同样式（常规、粗体、半粗斜体）合并配置，通过字重和样式类控制，无需单独定义多个字体族：

1. 更新 /pages/_app.js #

通过src数组配置所有字体文件，指定对应的weight（字重）和style（样式）：

import localFont from '@next/font/local'

const surt = localFont({
  src: [
    {
      path: './fonts/Surt-Normal-Regular.woff2',
      weight: '400',
      style: 'normal',
    },
    {
      path: './fonts/Surt-Normal-Bold.woff2',
      weight: '700',
      style: 'normal',
    },
    {
      path: './fonts/Surt-Normal-Semibold-Italic.woff2',
      weight: '600',
      style: 'italic',
    },
  ],
  variable: '--font-surt',
})

export default function MyApp({ Component, pageProps }) {
  return (
    <main className={surt.variable}>
      <Component {...pageProps} />
    </main>
  )
}

2. 更新 tailwind.config.js #

定义统一的surt字体族：

const { fontFamily } = require('tailwindcss/defaultTheme')

module.exports = {
  content: [
    './pages/**/*.{js,ts,jsx,tsx}',
    './components/**/*.{js,ts,jsx,tsx}',
  ],
  theme: {
    extend: {
      fontFamily: {
        surt: ['var(--font-surt)', ...fontFamily.sans],
      },
    },
  },
  plugins: [],
}

3. 组件中使用 #

通过Tailwind的字重、样式类切换不同字体：

export default function About() {
  return (
    <div className="space-y-2">
      <p className="font-surt">常规字重（400）</p>
      <p className="font-surt font-bold">粗体（700）</p>
      <p className="font-surt font-semibold italic">半粗斜体（600+italic）</p>
    </div>
  )
}

内容的提问来源于stack exchange，提问作者grabury