Next.js SSR本地字体加载优化：如何避免首屏默认字体切换闪屏？

1. 调整字体显示策略 #

当前代码中display: 'swap'是导致首屏字体切换的核心原因——该属性允许浏览器先渲染默认字体，待自定义字体加载完成后再切换。将其改为display: 'block'，浏览器会在自定义字体加载完成前短暂隐藏文本（最长3秒，超时则使用默认字体），彻底消除闪屏：

const myFont = localFont({
  src: [
      { path: 'Pretendard-Regular.woff2', weight: '400', style: 'normal' },
      { path: 'Pretendard-Medium.woff2', weight: '500', style: 'normal' },
      { path: 'Pretendard-SemiBold.woff2', weight: '600', style: 'normal' },
      { path: 'Pretendard-Black.woff2', weight: '900', style: 'normal' },
  ],
  display: 'block', // 替换原swap属性
  preload: true,
});

2. 确保全局字体样式全覆盖 #

修改全局CSS，确保所有元素都继承自定义字体，避免局部元素仍使用默认字体：

html, body, * {
  font-family: ${myFont.style.fontFamily}, sans-serif;
}

同时确认myFont.className完整包裹整个应用组件，保证样式优先级。

3. 优化Nginx字体文件配置 #

在Nginx服务器配置中添加字体缓存策略与正确的Content-Type，加速字体文件加载：

location ~* \.(woff2)$ {
  types {
    font/woff2 woff2;
  }
  expires 1y;
  add_header Cache-Control "public, immutable";
}

该配置让浏览器长期缓存字体文件，后续访问无需重复请求。

4. 压缩字体文件体积 #

对字体文件进行子集化处理，仅保留网站实际用到的字符（比如中文常用字、数字、符号），大幅降低woff2文件大小。可使用Pretendard官方子集生成工具或fonttools等工具完成处理，进一步缩短字体加载时间。

5. 验证并强化字体预加载 #

Next.js的localFont开启preload: true后，会自动在页面头部生成预加载标签。可通过浏览器开发者工具Network面板，确认字体文件是否在页面加载初期被优先请求。若自动预加载未生效，手动在_app.tsx中添加预加载：

import Head from 'next/head';

// ...

return (
  <>
    <Head>
      <link rel="preload" href="/fonts/Pretendard-Regular.woff2" as="font" type="font/woff2" crossOrigin="anonymous" />
      <!-- 仅预加载首屏必需的字体权重，避免阻塞其他资源 -->
    </Head>
    <style jsx global>
      {`
        html, body, * {
          font-family: ${myFont.style.fontFamily}, sans-serif;
        }
      `}
    </style>
    <div className={myFont.className}>
      <Component {...pageProps} />
    </div>
  </>
);

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