Next.js中使用@font-face时，为什么字体在部分页面加载不全？

♫翼杨提问于 2026-02-13 22:47:24 阅读 22

框架

我在Next.js项目里用@font-face引入字体文件，首页显示正常，但其他动态路由页面的字体全变成默认样式了。已经把字体文件放在public/fonts目录，用绝对路径引用也试过了。

代码是这样写的：


// pages/_app.js
import '../public/fonts/CustomFont.woff';

// styles/globals.css
@font-face {
  font-family: 'CustomFont';
  src: url('/fonts/CustomFont.woff') format('woff');
}
body {
  font-family: 'CustomFont', sans-serif;
}

控制台没报错，但进入类似/post/[id]这样的页面时字体就失效了。用标签在头部引入字体文件也没用，难道和SSR有关系？

我来解答赞 4 收藏

反馈

1 条解答

宇文桂霞 Lv1

字体文件路径没问题，但Next.js的SSR机制可能会导致动态路由页面加载时字体样式未正确应用。把字体文件的引入方式改一下，确保服务端和客户端都能正确加载。



/* styles/globals.css */

@font-face {

  font-family: 'CustomFont';

  src: url('/fonts/CustomFont.woff') format('woff');

  font-display: swap; /* 加上这个属性，避免闪屏或加载失败 */

}

body {

  font-family: 'CustomFont', sans-serif;

}

另外检查一下 next.config.js，确保没有对静态资源做特殊处理。如果还是不行，尝试用CSS的 localIdentName 或者直接用 styled-jsx 包一层样式，应该能用。

2026-02-14 18:14