如何在@next/font中使用Typekit/Adobe Fonts并应用Next.js优化？

由于Next.js官方字体优化文档未覆盖Typekit/Adobe Fonts，以下是适配Next.js优化机制的实操方案：

1. 提取Adobe Fonts关键资源信息 #

登录Adobe Fonts后台选好目标字体，生成嵌入代码后：

• 记下嵌入代码里的CSS链接（格式如https://use.typekit.net/[你的专属ID].css）
• 打开该CSS链接，复制所有@font-face规则，同时记录每个字体对应的font-family名称（比如'proxima-nova', sans-serif）

2. 预加载字体文件避免阻塞渲染 #

Next.js核心优化之一是资源预加载，针对Adobe Fonts的字体文件：

• 在Pages Router的_document.js或App Router的layout.js中，添加预加载标签：

// Pages Router _document.js 示例
import Document, { Html, Head, Main, NextScript } from 'next/document'

class MyDocument extends Document {
  render() {
    return (
      <Html>
        <Head>
          {/* 预加载字体文件，URL从Adobe Fonts的CSS中提取 */}
          <link
            rel="preload"
            href="https://use.typekit.net/fonts/proxima-nova-regular.woff2"
            as="font"
            type="font/woff2"
            crossOrigin="anonymous"
          />
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    )
  }
}

export default MyDocument

3. 内联关键字体CSS规则 #

把之前复制的@font-face规则内联到HTML头部，避免浏览器等待外部CSS加载才能解析字体：

• 在App Router的layout.js中通过metadata内联样式：

// App Router layout.js 示例
export const metadata = {
  style: [
    {
      cssText: `
        @font-face {
          font-family: 'proxima-nova';
          src: url('https://use.typekit.net/fonts/proxima-nova-regular.woff2') format('woff2');
          font-weight: 400;
          font-style: normal;
          font-display: swap;
        }
        /* 按需添加其他字体权重/样式的@font-face规则 */
      `
    }
  ]
}

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  )
}

重点：font-display: swap必须设置，它会让浏览器在字体加载完成前显示系统 fallback 字体，避免页面空白（FOIT）。

4. 按需加载非关键字体 #

如果仅页面局部使用特定字体权重/样式，可通过动态导入或组件级样式加载对应字体规则，减少初始加载的资源体积。

5. 验证优化效果 #

用Chrome DevTools检查：

• Network面板中字体文件是否处于Preload状态
• Performance面板是否无明显FOIT现象
• 查看页面源码，确认字体CSS已内联到头部

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