cssnext.jsgoogle-fontsnextjs-15

404 Errors when trying to import a google font in NextJS

I keep getting a 404 error when trying to import google fonts within my NextJS project:

 ⚠ [next]/internal/font/google/inter_5c8d1d76.module.css
Error while requesting resource
Received response with status 404 when requesting https://fonts.googleapis.com/css2?family=Inter:wght@400&display=swap

Import trace:
  [next]/internal/font/google/inter_5c8d1d76.module.css
  [next]/internal/font/google/inter_5c8d1d76.js
  ./app/layout.tsx


 ⚠ [next]/internal/font/google/inter_5c8d1d76.module.css
next/font: warning:
Failed to download `Inter` from Google Fonts. Using fallback font instead.

Import trace:
  [next]/internal/font/google/inter_5c8d1d76.module.css
  [next]/internal/font/google/inter_5c8d1d76.js
  ./app/layout.tsx

This is my layout.tsx file:

import type { Metadata } from "next";
import './globals.css';
import { Inter } from 'next/font/google'
 
const interFont = Inter({
  subsets: ["latin"],
  display: "swap",
  weight: "400",
})
 
export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en" className={interFont.className}>
      <body>{children}</body>
    </html>
  )
}

I have tried the following:

Any help would be greatly appreciated.

Solution

  • This seems to be an issue with one of the more recent versions of nextjs. I reverted from 15.4.1 to 15.3.5 and it works as expected again.

    Annoying that this is a larger released bug that should have 100% been caught in testing, but a revert to the previous version should fix.