Downloading fonts from Google Fonts is always a struggle when using Next.js

Question

Downloading fonts from Google Fonts is always a struggle when using Next.js

After initializing a fresh Next.js project using create-next-app, I managed to successfully launch it with npm run dev.

However, an issue arises every time Next.js boots up, displaying the following error:

FetchError: request to https://fonts.gstatic.com/s/inter/v12/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa1ZL7W0Q5nw.woff2 failed, reason: 
    at ClientRequest.<anonymous> (C:\Users\user\Desktop\documents\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 process.processTicksAndRejections (node:internal/process/task_queues:82:21) {
  type: 'system',
  errno: 'ENETUNREACH',
  code: 'ENETUNREACH'
}
- error Failed to download `Inter` from Google Fonts. Using fallback font instead.

My main objective is to have Next.js utilize the specified font instead of resorting to a fallback option.

Strangely, this issue occurs even though I haven't made any alterations to the Next.js setup yet. Furthermore, accessing the URL

https://fonts.gstatic.com/s/inter/v12/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa1ZL7W0Q5nw.woff2

in my web browser functions smoothly, indicating that it's likely not a network-related problem.

I conducted a search through the Next.js documentation but didn't encounter any similar instances.

Here's the content of layout.tsx, located within src/app/:

import './globals.css'
import { Inter } from 'next/font/google'

const inter = Inter({ subsets: ['latin'] })

export const metadata = {
  title: 'Create Next App',
  description: 'Generated by create next app',
}

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body className={inter.className}>{children}</body>
    </html>
  )
}

Additionally, I am currently utilizing Node version 20.3.0, npm version 9.4.1, and Next.js version 13.4, all of which are the latest versions available at the time of composing this inquiry.

javascript typescript next.js google-fonts

Answer 1

Answer №1

After trying out different browsers and clearing the cache without success, I finally found a solution. By adding the key display: 'swap', with the value swap, it resolved the issue:

This setting gives the font face an extremely small block period and an infinite swap period.

The "block" period for the font means:

If the font face isn't loaded, any element attempting to use it must render an invisible fallback font face. If the font successfully loads during this period, it is used as normal.

And the "swap" period for the font means:

If the font face isn't loaded, any element attempting to use it must render a fallback font face. If the font successfully loads during this period, it is used normally.

That's exactly what I needed to achieve.

Additionally, I included the key adjustFontFallback: false, which indicates:

A boolean value that determines whether an automatic fallback font should be used to reduce Cumulative Layout Shift. The default value is true.

So, here is my final version of layout.tsx:

import './globals.css'
import { Inter } from 'next/font/google'

const inter = Inter({ subsets: ['latin'], display: 'swap', adjustFontFallback: false})


export const metadata = {
  title: 'Create Next App',
  description: 'Generated by create next app',
}

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body className={inter.className}>{children}</body>
    </html>
  )
}

Answer 2

After trying out different browsers and clearing the cache without success, I finally found a solution. By adding the key display: 'swap', with the value swap, it resolved the issue:

This setting gives the font face an extremely small block period and an infinite swap period.

The "block" period for the font means:

If the font face isn't loaded, any element attempting to use it must render an invisible fallback font face. If the font successfully loads during this period, it is used as normal.

And the "swap" period for the font means:

If the font face isn't loaded, any element attempting to use it must render a fallback font face. If the font successfully loads during this period, it is used normally.

That's exactly what I needed to achieve.

Additionally, I included the key adjustFontFallback: false, which indicates:

A boolean value that determines whether an automatic fallback font should be used to reduce Cumulative Layout Shift. The default value is true.

So, here is my final version of layout.tsx:

import './globals.css'
import { Inter } from 'next/font/google'

const inter = Inter({ subsets: ['latin'], display: 'swap', adjustFontFallback: false})


export const metadata = {
  title: 'Create Next App',
  description: 'Generated by create next app',
}

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body className={inter.className}>{children}</body>
    </html>
  )
}

Answer 3

Answer №2

Encountered a similar problem with Bricolage Grotesque, but managed to fix it by implementing the following solution:

export const secondaryFont = Bricolage_Grotesque({
    subsets: ["latin"],
    variable: "--font-grotesque",
    display: "swap",
    adjustFontFallback: false,
});

Answer 4

Encountered a similar problem with Bricolage Grotesque, but managed to fix it by implementing the following solution:

export const secondaryFont = Bricolage_Grotesque({
    subsets: ["latin"],
    variable: "--font-grotesque",
    display: "swap",
    adjustFontFallback: false,
});

Answer 5

Answer №3

In my scenario, the fonts were loading properly in the live environment where I have SSL set up.

Answer 6

In my scenario, the fonts were loading properly in the live environment where I have SSL set up.

Answer 7

Answer №4

Encountered the same issue, but managed to resolve it with a simple addition of display:"swap"

import { Montserrat } from "google-fonts-next";

const montserrat = Montserrat({
  weight: ["300", "400", "500"],
  subsets: ["latin"],
  display: "swap",
});

<body className={`${montserrat.className} ...`}> 
...
</body>

Answer 8

Encountered the same issue, but managed to resolve it with a simple addition of display:"swap"

import { Montserrat } from "google-fonts-next";

const montserrat = Montserrat({
  weight: ["300", "400", "500"],
  subsets: ["latin"],
  display: "swap",
});

<body className={`${montserrat.className} ...`}> 
...
</body>

Answer 9

Answer №5

This updated version of Next resolved the problem I was facing.

Answer 10

This updated version of Next resolved the problem I was facing.

Downloading fonts from Google Fonts is always a struggle when using Next.js

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

Discovering the window.scrollTop, ScrollY, or any other distance value while utilizing CSS scroll snap can be achieved by following these

JSON to URN Converter: A tool for converting JSON references

Eliminate attributes from an object that are not defined within a specific type interface

Determining whether a user is accessing a page through a URL or by navigating within the app using Next.js

Is there a way to extract the content length from the raw DraftJS data?

What is the syntax for creating a link tag with interpolation in Angular 2 / Ionic 2?

JavaScript method overloading involves defining multiple functions with the same name

NodeJS application experiencing significant delays due to slow response times from MySQL database queries

Automated web browser capture downloading feature

Learn how to call JavaScript code from an HTML file using Ajax

Encountering a Next.js TypeScript Build Error related to the Type 'OmitWithTag<InputFormProps, keyof PageProps, "default">' issue

Apply an opacity setting of 0.5 to the specific segment representing 30% of the scrollable div

What is the reason behind being limited to sending only 5 requests if I fail to heed the data event?

Shifting successive elements in an array alternates

By default, showcase the value of the first item in the list selected in a mat-selection-list on a separate component

Server side processes automatically converting boolean parameters in Axios get requests to strings

Utilizing Angular2 to scan barcodes

Value in Hook not updating after memoization of parent component

Steps to activate a single button within a deactivated fieldset

Adjusting slidesPerView based on screen size in Ionic: A step-by-step guide