NextJS预加载字体触发Chrome警告，如何消除该提示？

你遇到的警告是因为Chrome检测到预加载的字体资源在页面load事件后几秒内没有被实际使用，哪怕你是有意预加载也会触发这个提示。下面是几个可行的解决办法：

1. 确保字体被CSS正确引用并使用 #

首先排查最基础的问题：

• 在你的CSS文件中，通过@font-face声明字体，且src的路径要和preload标签的href完全一致（注意大小写，服务器环境通常区分大小写）：

@font-face {
  font-family: 'GothamRndSSm';
  src: url('/font/GothamRndSSm-Light.otf') format('opentype');
  font-weight: 300;
  font-style: normal;
}

@font-face {
  font-family: 'GothamRndSSm';
  src: url('/font/GothamRndSSm-Book.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
}

• 确保页面中有元素实际使用这个字体，比如设置全局样式：

body {
  font-family: 'GothamRndSSm', sans-serif;
}

2. 给preload标签添加onload属性 #

如果已经正确引用但仍有警告，可以在preload的link标签里加上onload属性，让资源加载完成后转为常规字体引用，帮助浏览器识别资源用途：

<link
  rel="preload"
  as="font"
  type="font/otf"
  href="/font/GothamRndSSm-Light.otf"
  crossOrigin="anonymous"
  onload="this.rel='font'"
/>

3. 使用NextJS官方的next/font模块（推荐） #

NextJS的next/font模块会自动处理字体的预加载、缓存和正确引用，完全避免这类警告，还能优化字体加载性能。示例用法：
在app/layout.tsx或pages/_app.tsx中：

import localFont from 'next/font/local';

// 加载自定义字体
const gothamRounded = localFont({
  src: [
    {
      path: '../public/font/GothamRndSSm-Light.otf',
      weight: '300',
      style: 'normal',
    },
    {
      path: '../public/font/GothamRndSSm-Book.otf',
      weight: '400',
      style: 'normal',
    },
  ],
  variable: '--font-gotham',
});

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html className={gothamRounded.variable}>
      <body style={{ fontFamily: 'var(--font-gotham)' }}>
        {children}
      </body>
    </html>
  );
}

用这种方式不需要手动在_document.tsx里加preload标签，NextJS会自动处理所有细节。

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