Failed to get Google fonts

[tsujimic]

Link to the code that reproduces this issue

https://github.com/tsujimic/my-app

To Reproduce

% npx create-next-app@latest
✔ What is your project named? … my-app
✔ Would you like to use TypeScript? … No / Yes
✔ Would you like to use ESLint? … No / Yes
✔ Would you like to use Tailwind CSS? … No / Yes
✔ Would you like your code inside a `src/` directory? … No / Yes
✔ Would you like to use App Router? (recommended) … No / Yes
✔ Would you like to use Turbopack for `next dev`? … No / Yes
✔ Would you like to customize the import alias (`@/*` by default)? … No / Yes
Creating a new Next.js app in /Users/takashi.tsuji/projects/nextjs/my-app.

Using npm.

Initializing project with template: app-tw


Installing dependencies:
- react
- react-dom
- next

Installing devDependencies:
- typescript
- @types/node
- @types/react
- @types/react-dom
- @tailwindcss/postcss
- tailwindcss
- eslint
- eslint-config-next
- @eslint/eslintrc

% npm run dev

> my-app@0.1.0 dev
> next dev --turbopack

   ▲ Next.js 15.4.1 (Turbopack)
   - Local:        http://localhost:3000
   - Network:      http://192.168.10.23:3000

 ✓ Starting...
 ✓ Ready in 2.4s
 ○ Compiling / ...
 ✓ Compiled / in 7.8s
 ⚠ [next]/internal/font/google/geist_e531dabc.module.css
Error while requesting resource
Received response with status 404 when requesting https://fonts.googleapis.com/css2?family=Geist:wght@100..900&display=swap

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

Current vs. Expected behavior

I confirmed that this issue occurs on an Intel-based Mac, but I could not reproduce it on an Apple Silicon (M2) Mac.

Provide environment information

Operating System:
  Platform: darwin
  Arch: x64
  Version: Darwin Kernel Version 24.5.0: Tue Apr 22 19:53:26 PDT 2025; root:xnu-11417.121.6~2/RELEASE_X86_64
  Available memory (MB): 16384
  Available CPU cores: 8
Binaries:
  Node: 22.17.0
  npm: 11.4.2
  Yarn: N/A
  pnpm: 10.12.4
Relevant Packages:
  next: 15.4.1 // Latest available version is detected (15.4.1).
  eslint-config-next: N/A
  react: 19.1.0
  react-dom: 19.1.0
  typescript: N/A
Next.js Config:
  output: N/A

Which area(s) are affected? (Select all that apply)

Not sure

Which stage(s) are affected? (Select all that apply)

next dev (local)

Additional context

No response

_NEXT-4639

[vickrant-dev]

I have never faced this but maybe it's because I use custom fonts and stuff.
As far as I know thru research, the problem is using google fonts instead try using vercel fonts to check if it at least works from vercel fonts.

npm install @vercel/fonts

and then import it like this:
import { GeistSans, GeistMono } from "@vercel/fonts";

If this doesn't work and still gives you the same issue, let me know.

[tsujimic]

Thank you for your reply!

I tried installing @vercel/fonts using:

npm install @vercel/fonts

But I got the following error:

npm error code E404
npm error 404 Not Found - GET https://registry.npmjs.org/@vercel%2ffonts - Not found
npm error 404
npm error 404  '@vercel/fonts@*' is not in this registry.
npm error 404
npm error 404 Note that you can also install from a
npm error 404 tarball, folder, http url, or git url.

Instead, I installed geist with:

npm install geist

and imported it like this:

import { GeistSans } from "geist/font/sans";

This worked without any issues.

[vickrant-dev]

Oh, thats amazing. Thanks for letting me know.

[PaulHaze]

FWIW I have just noticed this as well. I am working through the Learn Next tutorial and all of a sudden I am getting a similar error:

Error while requesting resource
Received response with status 404 when requesting https://fonts.googleapis.com/css2?family=Lusitana:wght@400;700&display=swap

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

[vickrant-dev]

Yep, same one bug/error.

Did you try installing geist?
npm install geist

Edit by maintainer bot: Comment was automatically minimized because it was considered unhelpful. (If you think this was by mistake, let us know). Please only comment if it adds context to the issue. If you want to express that you have the same problem, use the upvote 👍 on the issue description or subscribe to the issue for updates. Thanks!

[dev-schad]

turbopack

[PaulHaze]

Yep, same one bug/error.

Did you try installing geist? npm install geist

I ended up going down the local route, and just downloading then converting Lustiana to woff, putting into the fonts folder (where Geist is stored in the default template) and then importing it into layout.tsx:

import localFont from 'next/font/local';
import '@/styles/main.css';

const lusitana = localFont({
  src: [
    {
      path: './fonts/Lusitana-Regular.woff',
      weight: '400',
      style: 'normal',
    },
    {
      path: './fonts/Lusitana-Bold.woff',
      weight: '700',
      style: 'normal',
    },
  ],
  variable: '--font-lusitana',
  display: 'swap',
});

That has it working for now. FWIW I tried again this morning to do the previous way and it was still returning the error from Google fonts. However as the above commenter has said, it looks like it is being caused by Turbopack because I just tried again WITHOUT using turbopack and the fonts are being fetched just fine.

So it looks like it is definitely Turbopack causing the issue...

[dev-schad]

or use v15.3.5

[freddydrodev]

I can't be sure but I think that this issue could be related to google itself because a get a similar issue when working with Flutter. Sometimes it loads the fonts but most of the time it failed with 404

[rimoslav]

@freddydrodev what's strange is that the Next error logs clearly list the URL that Next tries to fetch from and it's publicly accessible each time you try to load the page:

Error while requesting resource
Received response with status 404 when requesting https://fonts.googleapis.com/css2?family=Geist:wght@100..900&display=swap

[leandronn]

Hi. This is happening to me after upgrading nextjs to 15.4.2. And now my app is using "fallback font" instead of original.
When on 15.3.0 it worked fine.

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

Import trace:
  [next]/internal/font/google/quicksand_9fb1c9c4.module.css
  [next]/internal/font/google/quicksand_9fb1c9c4.js
  ./app/(platform)/layout.tsx


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

[leandronn]

I can't be sure but I think that this issue could be related to google itself because a get a similar issue when working with Flutter. Sometimes it loads the fonts but most of the time it failed with 404

In my case, it's not a problem with the fonts. I did this:

npm audit fix --force

and that upgraded my nextjs version to 15.4.2 and now... the problem with the fonts. minutes before, it was working perefctly.

[Willienn]

Yep, it seems like it's the new version. I started having this problem right after updating to 15.4.2
The last version without the error seems to be 15.4.0

I get:

Error while requesting resource
Received response with status 404 when requesting https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@100;200;300;400;500;600;700;800;900&display=swap

But if I click the link, it works fine.