Next.js首次访问或刷新时字体无法加载问题排查

你遇到的字体首次访问/刷新不加载的问题，核心是没有让Next.js的字体加载机制生效，代码遗漏了关键的字体样式注入步骤：

问题根源 #

当使用@next/font/google的variable选项时，Next.js会自动生成包含字体加载规则（@font-face）和CSS变量定义的className，但你没有将这些className挂载到页面根元素上。之前手动给:root赋值变量的操作，只是定义了变量名，但浏览器根本不知道要去下载对应的字体文件——因为缺少了字体加载的核心规则。

修正后的代码 #

import { Alegreya_Sans, Montserrat, IBM_Plex_Sans } from "@next/font/google";
const alegreya = Alegreya_Sans({
  weight: ["100", "300", "400", "500", "700"],
  variable: "--alegreya-font",
});
const montserrat = Montserrat({
  weight: "700",
  variable: "--montserrat-font",
});
const ibmSans = IBM_Plex_Sans({
  weight: ["400", "600"],
  variable: "--ibmSans-font",
});

function MyApp({ Component, pageProps }) {
  return (
    {/* 将三个字体的variable className挂载到根容器 */}
    <div className={`${alegreya.variable} ${montserrat.variable} ${ibmSans.variable}`}>
      <Component
        {...pageProps}
        isDarkTheme={isDark}
        setAllCategories={(value) => {
          setAllCategories(value);
        }}
        isMobile={isMobile}
      />
    </div>
  );
}

export default MyApp;

关键说明 #

1. 移除了手动的<style jsx global>代码——variable选项已经自动在根元素上注入了CSS变量，直接在全局样式中使用var(--alegreya-font)即可调用对应字体。
2. 根元素的className中合并了三个字体的variable属性，这会自动注入字体的加载规则，让浏览器正确下载并应用字体。

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