Quick Fix: To resolve the issue of Next.js failing to download fonts from Google Fonts, add display: 'swap' to the font configuration and adjustFontFallback: false to prevent automatic fallback fonts. This will significantly improve font loading and eliminate potential layout shifts.
The Problem:
Next.js fails to download fonts from Google Fonts, displaying a fallback font instead. Despite the font being accessible in the browser, Next.js encounters a FetchError with the error code ‘ENETUNREACH’ when attempting to download the font, resulting in the usage of the fallback font.
The Solutions:
Solution 1: Add `display: 'swap'` and `adjustFontFallback: false` to `next/font/google`
To fix the issue where Next.js fails to download fonts from Google Fonts, add the following properties to the `next/font/google` component in your `layout.tsx` file:
display: 'swap': This setting gives the font face a very small block period and an infinite swap period. During the block period, if the font is not loaded, the browser will display a fallback font. Once the font is loaded, it will be used instead.
adjustFontFallback: false: This setting disables the automatic fallback font mechanism used to reduce Cumulative Layout Shift. By setting it to false, you prevent Next.js from using a fallback font if the main font is not loaded.
With these properties added, your code should look like this:
import { Inter } from 'next/font/google'
const inter = Inter({ subsets: ['latin'], display: 'swap', adjustFontFallback: false })
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html lang="en">
<body className={inter.className}>{children}</body>
</html>
)
}
Solution 2: Using SSL Certificate
To resolve this issue, consider obtaining and installing an SSL certificate for your website. By doing so, you can ensure a secure connection between your website and Google Fonts, which should prevent the "ENETUNREACH" error and allow Next.js to download the fonts successfully.
Solution 3: Setting `adjustFontFallback` to `false`
Setting the `adjustFontFallback` option to `false` in the `next/font/google` hook can resolve the issue where fonts are not downloaded from Google Fonts. This option disables the automatic font fallback mechanism, ensuring that the browser uses the specified font or its fallback version.
Q&A
What is the solution to the issue of downloading fonts from Google Fonts in Next.js?
—
Add display: 'swap' and adjustFontFallback: false to the font configuration.
Why might the fonts load correctly in the production environment?
—
SSL is installed in the production environment.
Is there a similar issue with other fonts?
—
Yes, the issue has been reported with Bricolage_Grotesque.
Video Explanation:
The following video, titled "How to setup google fonts in next 13 with tailwind css - YouTube", provides additional insights and in-depth exploration related to the topics discussed in this post.
