如何在部署于域名子路径的Next.js应用中使用自定义字体？

适配子路径自定义字体的两种推荐方案 #

方案1：使用相对路径引用（推荐，无需额外逻辑）

Next.js构建时会自动处理CSS中相对路径引用的静态资源，自动拼接你配置的basePath，你只需要修改styles/globals.css里的字体路径为相对路径即可。
假设你的项目目录结构如下：

项目根目录
├── public
│   └── fonts // 字体存放路径
│       ├── MyCustomFont-Regular.ttf
│       ├── MyCustomFont-Bold.ttf
│       └── MyCustomFont-BoldItalic.ttf
└── styles
    └── globals.css

修改后的CSS写法：

@font-face {
  font-family: 'MyCustomFont';
  font-style: normal;
  font-weight: 400;
  src: url('../public/fonts/MyCustomFont-Regular.ttf') format('truetype');
  font-display: swap;
}
/* 其余字重、样式的字体路径全部按上述规则替换即可 */

如果嫌跳转到public目录麻烦，也可以直接把fonts文件夹放到styles目录下，路径简化为url('./fonts/MyCustomFont-Regular.ttf')，同样可以自动适配路径。

方案2：CSS变量动态注入前缀

如果你需要保留绝对路径的写法，也可以通过注入全局CSS变量的方式实现动态适配：

1. 首先在项目的入口文件（pages目录下的_app.tsx/jsx，或是app目录下的根layout文件）中注入basePath变量：

// pages/_app.tsx 示例
import '../styles/globals.css';

const isProd = process.env.NODE_ENV === 'production';
const basePath = isProd ? '/my-next-js-app' : '';

export default function App({ Component, pageProps }) {
  return (
    <>
      <style jsx global>{`
        :root {
          --base-path: ${basePath};
        }
      `}</style>
      <Component {...pageProps} />
    </>
  );
}

2. 修改globals.css中的字体引用，拼接CSS变量：

@font-face {
  font-family: 'MyCustomFont';
  font-style: normal;
  font-weight: 400;
  src: url(var(--base-path)/fonts/MyCustomFont-Regular.ttf) format('truetype');
  font-display: swap;
}
/* 其余字体路径同理替换即可 */

如果是Next.js 13及以上版本，更推荐使用官方内置的next/font模块加载自定义字体，它会自动处理路径适配、字体压缩、避免无样式文本闪烁等问题，不需要手动处理basePath兼容。

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