我在我的应用程序中使用亚马逊字体 Ember 作为自定义字体，我在 lib 文件夹中设置了一个字体，ts 文件，并按照不同博客文章中的说明正确导出字体，并使其在我的开发服务器中工作，但是当我构建应用程序时，它的看看当我转到 localhost:3000 时，CSS 未加载，然后我转到 auth 页面，CSS 正确加载，返回到 / ，它开始正常工作，但字体未加载，它显示 systemUi 作为字体样式我什至在后备中也从未使用过，我使用的是 arial 和 san serif
这是我的代码
import localFont from "next/font/local";
const Ember = localFont({
src: [
{
path: "../app/AmazonEmber_Th.ttf",
weight: "100",
style: "normal",
},
{
path: "../app/AmazonEmber_Lt.ttf",
weight: "200",
style: "normal",
},
{
path: "../app/AmazonEmber_Rg.ttf",
weight: "400",
style: "normal",
},
{
path: "../app/Amazon-Ember-Medium.ttf",
weight: "500",
style: "normal",
},
{
path: '../app/AmazonEmber_Bd.ttf',
weight: "700",
style: "normal",
},
{
path: '../app/AmazonEmber_He.ttf',
weight: "900",
style: "normal",
}
],
variable: "--font-ember",
display: "swap",
fallback: ["sans-serif", "arial"],
});
export { Ember };
my tailwind config file
import type { Config } from "tailwindcss"
const config = {
theme: {
fontFamily: {
Ember: ['var(--font-ember)', 'sans-serif']
}
},
plugins: [require("tailwindcss-animate")],
} satisfies Config
export default config
in root layout <body className={${Ember.className} font-Ember}>
注意，我不使用默认根布局，我有组路线，每条路线都有自己的布局
看起来你的代码没有问题。