Next.js 总是在从 Google Fonts 下载字体时失败。

huangapple
go评论279阅读模式
英文:

Next.js always fail at downloading fonts from Google Fonts

问题

我已经使用 create-next-app 第一次创建了一个新的 Next.js 项目，并且成功使用 npm run dev 运行它。

问题是，每次 Next.js 启动时，都会显示以下错误：

  1. FetchError: request to https://fonts.gstatic.com/s/inter/v12/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa1ZL7W0Q5nw.woff2 failed, reason: 
  2.     at ClientRequest.<anonymous> (C:\Users\user\Desktop\documents\node_modules\next\dist\compiled\node-fetch\index.js:1:65756)
  3.     at ClientRequest.emit (node:events:511:28)
  4.     at TLSSocket.socketErrorListener (node:_http_client:495:9)
  5.     at TLSSocket.emit (node:events:511:28)
  6.     at emitErrorNT (node:internal/streams/destroy:151:8)
  7.     at emitErrorCloseNT (node:internal/streams/destroy:116:3)
  8.     at process.processTicksAndRejections (node:internal/process/task_queues:82:21) {
  9.   type: 'system',
  10.   errno: 'ENETUNREACH',
  11.   code: 'ENETUNREACH'
  12. }
  13. - error Failed to download `Inter` from Google Fonts. Using fallback font instead.

我的目标是让 Next.js 使用实际的字体而不是备用字体。

我不知道为什么会发生这种情况，因为我尚未在 Next.js 中更改任何内容。甚至在浏览器中打开 https://fonts.gstatic.com/s/inter/v12/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa1ZL7W0Q5nw.woff2 的URL也能正常工作，所以我猜这不是一个网络问题。

我尝试在 Next.js 文档中搜索，但在这里没有找到任何重复的内容。

这是位于 src/app/ 内的 layout.tsx：

  1. import './globals.css'
  2. import { Inter } from 'next/font/google'
  4. const inter = Inter({ subsets: ['latin'] })
  6. export const metadata = {
  7.   title: 'Create Next App',
  8.   description: 'Generated by create next app',
  9. }
  11. export default function RootLayout({
  12.   children,
  13. }: {
  14.   children: React.ReactNode
  15. }) {
  16.   return (
  17.     <html lang="en">
  18.       <body className={inter.className}>{children}</body>
  19.     </html>
  20.   )
  21. }

另外，我正在运行 Node 版本 20.3.0 和 npm 版本 9.4.1，以及 Next.js 版本 13.4。基本上是在提问时的最新版本。

英文:

I've created a new Next.js project for the first time using create-next-app, and I've successfully run it with npm run dev.

The problem is that everytime Next.js starts, it says:

  1. FetchError: request to https://fonts.gstatic.com/s/inter/v12/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa1ZL7W0Q5nw.woff2 failed, reason: 
  2.     at ClientRequest.&lt;anonymous&gt; (C:\Users\user\Desktop\documents\node_modules\next\dist\compiled\node-fetch\index.js:1:65756)
  3.     at ClientRequest.emit (node:events:511:28)
  4.     at TLSSocket.socketErrorListener (node:_http_client:495:9)
  5.     at TLSSocket.emit (node:events:511:28)
  6.     at emitErrorNT (node:internal/streams/destroy:151:8)
  7.     at emitErrorCloseNT (node:internal/streams/destroy:116:3)
  8.     at process.processTicksAndRejections (node:internal/process/task_queues:82:21) {
  9.   type: &#39;system&#39;,
  10.   errno: &#39;ENETUNREACH&#39;,
  11.   code: &#39;ENETUNREACH&#39;
  12. }
  13. - error Failed to download `Inter` from Google Fonts. Using fallback font instead.

My goal is to make Next.js use the actual font not the fallback one.

I don't know why this happens as I didn't change anything in Next.js yet. Even opening the URL https://fonts.gstatic.com/s/inter/v12/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa1ZL7W0Q5nw.woff2 in my browser works well so I guess it's not a networking issue.

I tried to search in Next.js documentation and I didn't find any duplicates here.

Here's layout.tsx that's located inside src/app/:

  1. import &#39;./globals.css&#39;
  2. import { Inter } from &#39;next/font/google&#39;
  4. const inter = Inter({ subsets: [&#39;latin&#39;] })
  6. export const metadata = {
  7.   title: &#39;Create Next App&#39;,
  8.   description: &#39;Generated by create next app&#39;,
  9. }
  11. export default function RootLayout({
  12.   children,
  13. }: {
  14.   children: React.ReactNode
  15. }) {
  16.   return (
  17.     &lt;html lang=&quot;en&quot;&gt;
  18.       &lt;body className={inter.className}&gt;{children}&lt;/body&gt;
  19.     &lt;/html&gt;
  20.   )
  21. }

Also, I'm running Node version 20.3.0 and npm version 9.4.1 with Next.js 13.4. Basically the latest at the time of writing this question.

答案1

得分: 7

尝试不同的浏览器并清除缓存也没有帮助。我通过添加键display: 'swap'来解决了这个问题，其中值swap的含义是：

> 给字体设置了一个极小的块期和一个无限的交换期。

字体"块"期的含义是：

> 如果字体没有加载，任何试图使用它的元素必须渲染一个不可见的备用字体。如果在此期间成功加载字体，它将正常使用。

而字体"交换"期的含义是：

> 如果字体没有加载，任何试图使用它的元素必须渲染一个备用字体。如果在此期间成功加载字体，它将正常使用。

这基本上就是我在寻找的内容。

我还添加了键adjustFontFallback: false，这意味着：

> 一个布尔值，用于设置是否应使用自动备用字体来减少累积布局位移。默认值为true。

所以这是我的最终layout.tsx：

  1. import './globals.css'
  2. import { Inter } from 'next/font/google'
  4. const inter = Inter({ subsets: ['latin'], display: 'swap', adjustFontFallback: false})
  6. export const metadata = {
  7.   title: 'Create Next App',
  8.   description: 'Generated by create next app',
  9. }
  11. export default function RootLayout({
  12.   children,
  13. }: {
  14.   children: React.ReactNode
  15. }) {
  16.   return (
  17.     <html lang="en">
  18.       <body className={inter.className}>{children}</body>
  19.     </html>
  20.   )
  21. }
英文:

Trying different browsers and clearing the cache didn't help either. I've solved it by adding key display: &#39;swap&#39;, where value swap means:

> Gives the font face an extremely small block period and an infinite swap period.

Where font "block" period means:

> If the font face is not loaded, any element attempting to use it must render an invisible fallback font face. If the font face successfully loads during this period, it is used normally.

And font "swap" period means:

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

And that's pretty much what I was looking for.

I've also added key adjustFontFallback: false which means:

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

So here's my final layout.tsx:

  1. import &#39;./globals.css&#39;
  2. import { Inter } from &#39;next/font/google&#39;
  4. const inter = Inter({ subsets: [&#39;latin&#39;], display: &#39;swap&#39;, adjustFontFallback: false})
  7. export const metadata = {
  8.   title: &#39;Create Next App&#39;,
  9.   description: &#39;Generated by create next app&#39;,
  10. }
  12. export default function RootLayout({
  13.   children,
  14. }: {
  15.   children: React.ReactNode
  16. }) {
  17.   return (
  18.     &lt;html lang=&quot;en&quot;&gt;
  19.       &lt;body className={inter.className}&gt;{children}&lt;/body&gt;
  20.     &lt;/html&gt;
  21.   )
  22. }

答案2

得分: 0

对我来说，在我安装了SSL的生产环境中，字体加载正确。

英文:

For me, the Fonts were loading correctly in the production environment where I have the SSL installed.

huangapple
  • 本文由 发表于 2023年6月15日 06:50:24
  • 转载请务必保留本文链接：https://go.coder-hub.com/76478043.html
  • google-fonts
  • next.js
  • tsx
  • typescript
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定