我正在使用@next/font/google来优化我的项目的性能。但是我遇到了一些问题，字体在第一次访问或刷新页面时没有加载。
我的实现
pages/_appjs

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 (
    <>
      <style jsx global>{`
        :root {
          --alegreya-font: ${alegreya.style.fontFamily};
          --ibmSans-font: ${ibmSans.style.fontFamily};
          --montserrat-font: ${montserrat.style.fontFamily};
        }
      `}</style>
      <Component
        {...pageProps}
        isDarkTheme={isDark}
        setAllCategories={(value) => {
          setAllCategories(value);
        }}
        isMobile={isMobile}
      />
    </>
  );
}

export default MyApp;

有没有人能找出我在上面的代码中遗漏了什么？