我正在尝试将 google 字体加载到 Nextjs 项目,但出现以下错误。在 nextjs12 中它工作正常,但我必须使用头部字体的链接。使用 @next/font/local 也会出现此错误。
我一直在努力解决这个问题,感谢任何帮助。
我正在使用官方文档流程来添加全局字体。我正在使用 Nextjs13。
我的_app.tsx代码是:
import { useApollo } from "@api/apollo/apolloclient";
import { ApolloProvider } from "@apollo/client";
import { CacheProvider, EmotionCache } from "@emotion/react";
import { Ubuntu } from "@next/font/google";
import "focus-visible/dist/focus-visible";
import { DefaultSeo } from "next-seo";
import { AppProps } from "next/app";
import { ChakraProvider, ColorModeScript } from "@chakra-ui/react";
import theme from "@definitions/chakra/theme";
import { ThemeColorProvider } from "@definitions/context/theme";
import createEmotionCache from "@definitions/utils/createEmotionCache";
import Layout from "@layouts/default";
import "@styles/app.css";
import "@styles/global.scss";
import SEO from "../../next-seo.config";
import { useEffect, useState } from "react";
type ComponentWithPageLayout = AppProps & {
Component: AppProps["Component"] & {
PageLayout?: React.ComponentType;
};
emotionCache: EmotionCache;
};
const clientSideEmotionCache = createEmotionCache();
function sApp({
Component,
emotionCache = clientSideEmotionCache,
pageProps,
}: ComponentWithPageLayout): JSX.Element {
const apolloClient = useApollo(pageProps);
const AnyComponent = Component as any;
const Layoutio = Component.PageLayout as any;
const ubt = Ubuntu({
weight: ["300", "400", "500", "700"],
style: ["normal", "italic"],
});
const [showChild, setShowChild] = useState(false);
useEffect(() => {
setShowChild(true);
}, []);
if (!showChild) {
return null;
}
if (typeof window === "undefined") {
return <></>;
} else {
return (
<>
<style jsx global>{`
html {
font-family: ${ubt.style.fontFamily};
}
`}</style>
<CacheProvider value={emotionCache}>
<ApolloProvider client={apolloClient}>
<ThemeColorProvider>
<ChakraProvider theme={theme}>
<ColorModeScript
initialColorMode={theme.config.initialColorMode}
/>
<DefaultSeo {...SEO} />
{Component.PageLayout ? (
<Layoutio>
<AnyComponent {...pageProps} />
</Layoutio>
) : (
<Layout>
<AnyComponent {...pageProps} />
</Layout>
)}
</ChakraProvider>
</ThemeColorProvider>
</ApolloProvider>
</CacheProvider>
</>
);
}
}
export default App;
只需将 ubt 常量移至 sApp 函数上方即可:)
例如在函数之外使用它
const myFont = localFont({
src: 'local src',
display: 'fallback',
});
function myApp() {
return <div className={myFont.className}></div>;
}
在 _app.tsx 下,有效的最少代码如下所示。我正在使用查克拉。缺点是这是实验性的,在某些设备上有效,但在 Safari 等设备上失败。
import { useApollo } from "@api/apollo/apolloclient";
import { EmotionCache, CacheProvider } from "@emotion/react";
import { Ubuntu } from "@next/font/google";
import "focus-visible/dist/focus-visible";
import { DefaultSeo } from "next-seo";
import { AppProps } from "next/app";
import theme from "@definitions/chakra/theme";
import { ThemeColorProvider } from "@definitions/context/theme";
import createEmotionCache from "@definitions/utils/createEmotionCache";
import "@styles/app.css";
import "@styles/global.scss";
import SEO from "../../next-seo.config";
import { ChakraProvider, ColorModeScript } from "@chakra-ui/react";
import { ApolloProvider } from "@apollo/client";
type ComponentWithPageLayout = AppProps & {
Component: AppProps["Component"] & {
PageLayout?: React.ComponentType;
};
emotionCache: EmotionCache;
};
const clientSideEmotionCache = createEmotionCache();
function sApp({
Component,
emotionCache = clientSideEmotionCache,
pageProps,
}: ComponentWithPageLayout): JSX.Element {
const apolloClient = useApollo(pageProps);
const AnyComponent = Component as any;
const Layoutio = Component.PageLayout as any;
const ubt = Ubuntu({
weight: ["300", "400", "500", "700"],
style: ["normal", "italic"],
});
return (
<>
<CacheProvider value={emotionCache}>
<ApolloProvider client={apolloClient}>
<ThemeColorProvider>
<ChakraProvider theme={theme}>
<ColorModeScript
initialColorMode={theme.config.initialColorMode}
/>
<DefaultSeo {...SEO} />
//Wrap component with classname
<main className={ubt.className}>
<AnyComponent {...pageProps} />
</main>
</ChakraProvider>
</ThemeColorProvider>
</ApolloProvider>
</CacheProvider>
</>
);
}
export default App;
对于下一个配置,请在 nextconfig 中添加此块。
experimental: {
appDir: true,
fontLoaders: [
{ loader: "@next/font/google", options: { subsets: ["latin"] } },
],},
我也遇到了这个问题,但这是我的解决方案。
import React from "react";
import Link from "next/link";
import { Butterfly_Kids } from '@next/font/google';
import Button from "../Button";
const inter = Butterfly_Kids({ weight: "400", subsets:["latin-ext" ] })
您必须为字体函数对象指定一些属性,例如,
Butterfly_Kids({
weight: "400",
subsets:["latin-ext" ],
style : "normal
})
等 我希望这能解决您的问题。
这解决了我的问题:
https://github.com/vercel/next.js/issues/44433#issuecomment-1938197403
只需添加以下评论: /* 伊斯坦布尔忽略下一个 */