Browse Source

perf(fonts): enable font preloading across active typography to eliminate FOUT/layout shift

master
mortezaei 2 weeks ago
parent
commit
011a00e151
  1. 39
      src/app/layout.tsx

39
src/app/layout.tsx

@ -17,7 +17,7 @@ const yekanxArabic = localFont({
src: "../../public/fonts/yekanx-arabic/ArabicYekanXRegular.ttf", src: "../../public/fonts/yekanx-arabic/ArabicYekanXRegular.ttf",
variable: "--font-yekanx-arabic", variable: "--font-yekanx-arabic",
display: "swap", display: "swap",
preload: false,
preload: true,
fallback: ["Segoe UI", "Tahoma", "Geneva", "Verdana", "sans-serif"], fallback: ["Segoe UI", "Tahoma", "Geneva", "Verdana", "sans-serif"],
}); });
@ -25,7 +25,7 @@ const yekanx = localFont({
src: "../../public/fonts/yekanx/YekanXFaNum-R.ttf", src: "../../public/fonts/yekanx/YekanXFaNum-R.ttf",
variable: "--font-yekanx", variable: "--font-yekanx",
display: "swap", display: "swap",
preload: false,
preload: true,
fallback: ["Segoe UI", "Tahoma", "Geneva", "Verdana", "sans-serif"], fallback: ["Segoe UI", "Tahoma", "Geneva", "Verdana", "sans-serif"],
}); });
@ -33,7 +33,7 @@ const notoNastaliqUrdu = localFont({
src: "../../public/fonts/urdu/NotoNastaliqUrdu.ttf", src: "../../public/fonts/urdu/NotoNastaliqUrdu.ttf",
variable: "--font-nastaliq-urdu", variable: "--font-nastaliq-urdu",
display: "swap", display: "swap",
preload: false,
preload: true,
fallback: ["Segoe UI", "Tahoma", "Geneva", "Verdana", "sans-serif"], fallback: ["Segoe UI", "Tahoma", "Geneva", "Verdana", "sans-serif"],
}); });
@ -52,7 +52,7 @@ const segoeui = localFont({
], ],
variable: "--font-segoeui", variable: "--font-segoeui",
display: "swap", display: "swap",
preload: false,
preload: true,
fallback: ["Segoe UI", "Tahoma", "Geneva", "Verdana", "sans-serif"], fallback: ["Segoe UI", "Tahoma", "Geneva", "Verdana", "sans-serif"],
}); });
@ -64,35 +64,6 @@ const faminela = localFont({
fallback: ["Arial", "sans-serif"], fallback: ["Arial", "sans-serif"],
}); });
const amiri = localFont({
src: [
{
path: "../../public/fonts/Amiri/Amiri-Regular.ttf",
weight: "400",
style: "normal",
},
{
path: "../../public/fonts/Amiri/Amiri-Italic.ttf",
weight: "400",
style: "italic",
},
{
path: "../../public/fonts/Amiri/Amiri-Bold.ttf",
weight: "700",
style: "normal",
},
{
path: "../../public/fonts/Amiri/Amiri-BoldItalic.ttf",
weight: "700",
style: "italic",
},
],
variable: "--font-amiri",
display: "swap",
preload: false,
fallback: ["Arial", "sans-serif"],
});
const isDevelopment = process.env.NODE_ENV !== "production"; const isDevelopment = process.env.NODE_ENV !== "production";
export const metadata: Metadata = { export const metadata: Metadata = {
@ -450,7 +421,7 @@ export default async function RootLayout({
/> />
</head> </head>
<body <body
className={`${segoeui.variable} ${yekanxArabic.variable} ${yekanx.variable} ${notoNastaliqUrdu.variable} ${faminela.variable} ${amiri.variable}`}
className={`${segoeui.variable} ${yekanxArabic.variable} ${yekanx.variable} ${notoNastaliqUrdu.variable} ${faminela.variable}`}
suppressHydrationWarning suppressHydrationWarning
> >
<Providers initialProfile={initialProfile}> <Providers initialProfile={initialProfile}>

Loading…
Cancel
Save