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

Tips for concurrently and asynchronously executing multiple AJAX requests

A beginner's guide to using Jasmine to test $http requests in AngularJS

How can I use jQuery to switch the positions of two <div> elements in HTML based on the selection of a dropdown value?

Unable to minimize or hide the ace editor widget with Cypress

Issue with jQuery selector not updating when variable changes

``Is there a specific scenario where the use of getInitialProps is recommended when automatically redirecting from one

Do not use npm to install underscore libraries

Easily fetching data with AJAX through jQuery

Utilize a method in Vue.js to filter an array within a computed property

Ajax - Retrieving data from a different webpage

ASP.NET MVC - AjaxContext is a powerful feature provided by the

The console indicates that the state's arrays have been filled, yet I'm unable to retrieve the object[0]

Can you explain the roles of client-side and server-side in Next.js?

Utilizing the validator in Vue with the setup script, TypeScript, and the composition API

Exchange one HTML element with a different HTML element

Is the NEXTAUTH_SECRET variable equivalent to the backend secret utilized for JWT token generation?

Guide on Minimizing ES6 with Gulp

The issue arises when trying to call a JavaScript function that has not been properly

Adjusting HTML5 drag height while resizing the window

The application of the Same Origin Policy appears to be ambiguous when utilizing the jQuery AJAX