如何在Next.js 13 App目录用next/font导入Typekit自定义字体

由于Next.js官方文档仅覆盖Google Fonts的导入，针对Typekit（Adobe Fonts）的自定义字体导入，你可以通过next/font/local模块实现，具体步骤如下：

1. 准备Typekit字体文件 #

• 登录Adobe Fonts（原Typekit），找到目标字体，下载对应字重、样式的字体文件（优先选择woff2格式，体积更小）。
• 将下载的字体文件放到项目的public/fonts目录下（如果没有该目录，自行创建）。

2. 创建字体配置文件 #

在app目录下新建fonts.ts文件，用next/font/local配置字体：

import localFont from 'next/font/local';

// 根据你下载的字体文件调整路径、字重和样式
const typekitFont = localFont({
  src: [
    {
      path: '../public/fonts/your-font-regular.woff2',
      weight: '400',
      style: 'normal',
    },
    {
      path: '../public/fonts/your-font-bold.woff2',
      weight: '700',
      style: 'normal',
    },
    // 按需添加更多字重/样式
  ],
  // 可选：定义CSS变量，方便全局复用
  variable: '--font-typekit',
});

export { typekitFont };

3. 在根布局中全局应用字体 #

打开app/layout.tsx，导入配置好的字体并应用到根元素：

import { typekitFont } from './fonts';

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    // 方式1：直接使用生成的类名
    <html lang="zh-CN" className={typekitFont.className}>
      <body>{children}</body>
    </html>

    // 方式2：使用CSS变量（如果配置了variable）
    // <html lang="zh-CN" style={{ fontFamily: typekitFont.style.fontFamily }}>
    //   <body>{children}</body>
    // </html>
  );
}

4. 在组件/样式中使用字体 #

• 如果用了类名方式，全局元素都会自动使用该字体；
• 如果用了CSS变量，可以在局部样式中指定：

.custom-text {
  font-family: var(--font-typekit);
}

注意事项 #

• 确认字体使用符合Adobe Fonts的授权协议，避免侵权；
• Next.js会自动处理字体的预加载、缓存优化，无需额外配置；
• App目录下禁止使用旧的内联CSS导入字体，必须通过next/font系列模块实现。

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