我正在尝试在我的 NextJS 项目中使用 Google Fonts，它在 Chrome、Firefox 和 Safari Mac 上运行良好。但在 Safari iOS 上，它默认为 Times New Roman。
这是我在产品中的代码：
// layout.tsx
import { Jomolhari, Josefin_Slab, Josefin_Sans } from "next/font/google";
const jomolhari = Jomolhari({
weight: "400",
subsets: ["latin"],
variable: "--font-jomolhari",
display: "swap",
});
const josefinSans = Josefin_Sans({
subsets: ["latin"],
variable: "--font-josefin-sans",
display: "swap",
});
const josefinSlab = Josefin_Slab({
subsets: ["latin"],
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html
className={`${jomolhari.variable} ${josefinSans.variable} ${josefinSlab.variable}`}
lang="en"
>
<body className={josefinSlab.className}>
{children}
</body>
</html>
);
}
});
我尝试过其他解决方案，例如下载字体和使用 localFont()。还在 global.css 上使用 @font-face。或者甚至通过 global.css 上的 url 远程获取字体。
我意识到 Safari 使使用字体变得更加困难，但一定有办法，我确信其他人已经解决了这个问题。
提前感谢您的帮助。我将继续尝试寻找解决方案，如果找到，我将更新这篇文章。
您需要添加：
布局类名字符串中的后备
className={`${inter.variable} font-sans ${serif.variable} font-serif ${mono.variable} font-mono
tailwind 配置文件中扩展 fontFamily 属性中的变量。
字体家族：{ sans: ["var(--inter)"], 衬线：[“var(--instrument)”]， 单声道：[“var（--roboto-mono）”]， }
来自 Vercel 的 Lee 的这段视频对此进行了解释，按照视频操作就可以了，我也遇到了同样的问题！