Preloading fonts is not working at all #78404
Replies: 2 comments 3 replies
-
|
I guess, you don't use either font directly in your layout? Or maybe just one? I tried a few combinations with a fresh create-next-app, and it works fine. Maybe we could see more of your layout, or use of the fonts? |
Beta Was this translation helpful? Give feedback.
-
|
Hi, I'm using SSG mode, using fonts like this, it's supposed to send the request to fonts earlier than css but it doesn't!! import "./globals.css"; const arima = Arima({ export default function RootLayout({ children }) { <textarea name="message"></textarea> {children} ); } /** @type {import('next').NextConfig} */ export default nextConfig; |
Beta Was this translation helpful? Give feedback.
-
|
Aha, export mode, I haven't verified there... but I see on my own site, and in the fresh create-next-app, that the fonts are requested right after the 
Could you share yours? and the top of the |
Beta Was this translation helpful? Give feedback.
-
|
mine does the exact opposite of that, note that when I deploy on vercel the issue magically goes away, but on netlify & cloudflare pages it persists.
|
Beta Was this translation helpful? Give feedback.
-
|
What about local runs? That's rather odd 🤔 I know there can be some divergences, but if the build output is the same... then this kind of behavior should not happen. Again, if you build locally and run the proejct with, for example, Regardless, the |
Beta Was this translation helpful? Give feedback.
Uh oh!
There was an error while loading. Please reload this page.
-
Hey there, I've been trying to preload fonts in Nextjs 15.3 app router but it doesn't work, the final HTML in the browser does not contain any preload links to my font, and manually injecting a link tag in layout file doesn't work either since links to css are far above the links to fonts in the end result, I'm using SSG version.
import { Arima, Montserrat } from "next/font/google";
import "./globals.css";
const ar = Arima({
preload: true,
variable: "--font-ar",
subsets: ["latin"],
});
const mn = Montserrat({
preload: true,
variable: "--font-mn",
subsets: ["latin"],
});
Beta Was this translation helpful? Give feedback.
All reactions