NextJS 13中如何用localFont()避免font-family带哈希值？

不用切换到global.css或styled-components，直接给localFont()补充几个配置项就能解决问题：

修改后的localFont配置代码 #

const roboto = localFont({
  src: [
    {
      path: '../themes/fonts/Roboto400.woff2',
      weight: '400',
      style: 'normal',
      // 让浏览器优先调用系统中已安装的Roboto字体
      local: 'Roboto'
    },
    {
      path: '../themes/fonts/Roboto700.woff2',
      weight: '700',
      style: 'normal',
      local: 'Roboto'
    }
  ],
  // 强制指定字体族名称为Roboto，替代自动生成的哈希名
  fontFamily: 'Roboto',
  // 设置字体加载失败时的回退选项
  fallback: ['sans-serif']
});

为什么这么改有效？ #

• local: 'Roboto'：告诉浏览器优先使用用户本地已安装的Roboto字体，找不到再加载你提供的woff2文件；
• fontFamily: 'Roboto'：直接指定字体族名称，阻止Next.js自动生成带哈希的标识；
• fallback: ['sans-serif']：确保字体未加载完成或不可用时，页面能正常显示系统默认无衬线字体。

最终效果验证 #

修改后生成的CSS会变成你想要的样式：

.__className_9f4694 {
    font-family: 'Roboto', sans-serif;
}

这样既保留了localFont()自带的字体优化能力（比如自动预加载、按需加载），又解决了哈希值的问题。

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