Problem with font loading
Unanswered
Tokio posted this in #help-forum
TokioOP
I'm working in NeXT 15, my root component is asynchronous, so the fonts are loaded asynchronously, but when I reload the page, there is a flicker. First I see the base styles, and then the styles of my font.
How to avoid this? How to make the styles load immediately?
import type { Metadata } from "next";
import { Lato } from "next/font/google";
import { notFound } from "next/navigation";
import { getMessages } from "next-intl/server";
import { Locale, routing } from "../../i18n/routing";
import { NextIntlClientProvider } from "next-intl";
import { ReduxProvider } from "@/components/redux-provider";
import "./globals.css";
import "../../styles/globals.scss";
const lato = Lato({
variable: "--font-lato",
subsets: ["latin"],
weight: ["100", "300", "400", "700", "900"],
display: "swap",
});
export const metadata: Metadata = {
title: "Create Next App",
description: "Generated by create next app",
};
export default async function RootLayout({
children,
params,
}: Readonly<{
children: React.ReactNode;
params: { locale: Locale };
}>) {
const { locale } = await params;
if (!routing.locales.includes(locale as Locale)) {
notFound();
}
// Providing all messages to the client
// side is the easiest way to get started
const locales = await getMessages();
return (
<html lang={locale}>
<body
className={
>
<ReduxProvider>
<NextIntlClientProvider messages={locales}>
<main>
{children}
</main>
</NextIntlClientProvider>
</ReduxProvider>
</body>
</html>
);
}
How to avoid this? How to make the styles load immediately?
import type { Metadata } from "next";
import { Lato } from "next/font/google";
import { notFound } from "next/navigation";
import { getMessages } from "next-intl/server";
import { Locale, routing } from "../../i18n/routing";
import { NextIntlClientProvider } from "next-intl";
import { ReduxProvider } from "@/components/redux-provider";
import "./globals.css";
import "../../styles/globals.scss";
const lato = Lato({
variable: "--font-lato",
subsets: ["latin"],
weight: ["100", "300", "400", "700", "900"],
display: "swap",
});
export const metadata: Metadata = {
title: "Create Next App",
description: "Generated by create next app",
};
export default async function RootLayout({
children,
params,
}: Readonly<{
children: React.ReactNode;
params: { locale: Locale };
}>) {
const { locale } = await params;
if (!routing.locales.includes(locale as Locale)) {
notFound();
}
// Providing all messages to the client
// side is the easiest way to get started
const locales = await getMessages();
return (
<html lang={locale}>
<body
className={
${lato.variable} h-screen wrapper}>
<ReduxProvider>
<NextIntlClientProvider messages={locales}>
<main>
{children}
</main>
</NextIntlClientProvider>
</ReduxProvider>
</body>
</html>
);
}
2 Replies
It also happens with me, tho it doesn't take that long.
if its less than few ms/s