Fonts intermittently don't load in development environment

[jbritain]

Sometimes when running yarn dev, the console throws up the following errors

FetchError: request to https://fonts.googleapis.com/css2?family=Rubik:[email protected]&display=swap failed, reason: 
    at ClientRequest.<anonymous> (/home/joshua/Documents/Programming/frontend/node_modules/next/dist/compiled/node-fetch/index.js:1:65756)
    at ClientRequest.emit (node:events:511:28)
    at TLSSocket.socketErrorListener (node:_http_client:495:9)
    at TLSSocket.emit (node:events:511:28)
    at emitErrorNT (node:internal/streams/destroy:151:8)
    at emitErrorCloseNT (node:internal/streams/destroy:116:3)
    at processTicksAndRejections (node:internal/process/task_queues:82:21)
    at runNextTicks (node:internal/process/task_queues:64:3)
    at listOnTimeout (node:internal/timers:540:9)
    at process.processTimers (node:internal/timers:514:7) {
  type: 'system',
  errno: 'ENETUNREACH',
  code: 'ENETUNREACH'
}
- error Failed to download `Rubik` from Google Fonts. Using fallback font instead.
FetchError: request to https://fonts.googleapis.com/css2?family=Orbitron:[email protected]&display=swap failed, reason: 
    at ClientRequest.<anonymous> (/home/joshua/Documents/Programming/frontend/node_modules/next/dist/compiled/node-fetch/index.js:1:65756)
    at ClientRequest.emit (node:events:511:28)
    at TLSSocket.socketErrorListener (node:_http_client:495:9)
    at TLSSocket.emit (node:events:511:28)
    at emitErrorNT (node:internal/streams/destroy:151:8)
    at emitErrorCloseNT (node:internal/streams/destroy:116:3)
    at processTicksAndRejections (node:internal/process/task_queues:82:21)
    at runNextTicks (node:internal/process/task_queues:64:3)
    at process.processTimers (node:internal/timers:511:9) {
  type: 'system',
  errno: 'ENETUNREACH',
  code: 'ENETUNREACH'
}
- error Failed to download `Orbitron` from Google Fonts. Using fallback font instead.

The result of this is that the site resorts to using the default serif font, as shown

Apart from the fact that the fonts don't load, we ought to also ensure that the fallback font is a sans serif font as opposed to a serif one.

[nitishdhar]

This is still happening - Mac, Edge Browser running yarn dev

[nitishdhar]

It seems to work fine with --turbo but happens when not using turbo.

[nitishdhar]

Another related issue for the fetch failure - vercel/next.js#45080

[nitishdhar]

@jbritain - so there are two issues here -

1. No console error but the fonts don't render in dev environment
2. Console error for fetch of the fonts from google

For 1., I have pushed this fix #95 but for 2., there isn't a clean fix yet (vercel/next.js#45080) but there's a workaround, just delete you .next folder and and run yarn dev again.

[fuomag9]

This still does not work for me, using curl via the terminal works fine so it's not a network issue

[ziin]

It seems to work fine with --turbo but happens when not using turbo.

I had this fetch problem only in development and I fixed it using the --turbo flag.

[sumairq]

Deleting the .next folder and regenerating it does not work for me.
Adding --tubo flag to my dev script works "dev": "next dev --turbo",
However, we should not be needing the turbopack just so the fonts load properly in the development environment. I hope this issue gets fixed soon.

I am running "next": "14.0.4" with node v20.6.1.

[aslink87]

I finally got this to happen to me as well. I've made a pr to switch entirely to local fonts. #137