Next.JS Font optimization issue in dev mode

Question

Hi, moved to Next.js font optimization from simply just importing the google font, thinking it would be better, well it is but only in release mode.

When I'm in a RUN DEV and i'm using the font optimization by next.js the page loads extremly slow (images are loading after 13.27 s) and when I refresh the webpage it gets stuck in a forever loading loop and it never loads. All those issues are only in a dev mode and only after i added the next.js font opimization.

I'm using Readex_Pro font from google, it's a variable font too.

my app/layout.tsx

import type { Metadata } from "next";
import "./globals.css";
import { NextIntlClientProvider } from 'next-intl';
import {getLocale} from 'next-intl/server';
import Script from 'next/script';
import { Readex_Pro } from "next/font/google";

const readexPro = Readex_Pro({
  subsets: ["latin"],
  display: 'swap',
});


export const metadata: Metadata = {
  title: "Title",
  description: "Description",
  keywords: "Keywords",
  authors: [{ name: "Author" }],
  creator: "Creator",
  publisher: "Publisher",
  formatDetection: {
    email: false,
    address: false,
    telephone: false,
  },
  icons: {
    icon: '/favicon.ico',
    shortcut: '/favicon.ico',
    apple: '/favicon.ico',
  },
  openGraph: {
    title: "Title",
    description: "Description",
    type: "website",
    locale: "en_US",
    siteName: "Title",
    images: [
      {
        url: '/favicon.ico',
        width: 1200,
        height: 630,
        alt: 'Logo',
      },
    ],
  },
  alternates: {
    canonical: 'https://title.com',
  },
};

export default async function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  const locale = await getLocale();
  return (
    <html lang={locale} className={readexPro.className}>
      <body className="antialiased">
        <NextIntlClientProvider>
          {children}
        </NextIntlClientProvider>
      </body>
    </html>
  );
}

Any help would be appreciated

joulev · Accepted Answer

are you using turbopack? if you are, try switching to webpack instead (by removing --turbo from the dev script in your package.json)

if both turbopack and webpack fail, you should report the bug on the nextjs github repository

Next.JS Font optimization issue in dev mode

2 Replies