build: self-host Inter so the build doesn't fetch Google Fonts

オープン 初心者向け
  • 何か問題がありますか？
#243 コメント 0 件 リアクション 0 件 担当者 0 名 GitHub で見る

まだ誰も着手していません。

評価

難易度
2/5
見積もり時間
1〜3時間
初心者へのやさしさ
72/100
issue の種類
バグ
明瞭さ
明確に書かれている
活発さ
活発
技術スタック
javascript, nextjs, react
領域
build-system, frontend

調査の方向性

フォントは src/app/layout.jsx で next/font/google を使って読み込まれています。同じファイルの Lexend はすでに next/font/local を使っているので、これを真似るパターンです。src/fonts/ の下に可変ウェイトの latin 版 Inter .woff2 をコミットし、Inter の呼び出しを同じ display と variable の設定を持つ localFont に置き換え、google のインポートを削除します。npm run build が fonts.gstatic.com へのリクエストなしに成功し、--font-inter 変数が引き続き解決されれば完了です。

索引モデルが issue の本文から書いたものです。

説明

npm run build downloads the Inter font from Google Fonts on every build, so a network blip on the runner fails the build even when nothing in the source is wrong.

Where: src/app/layout.jsx loads Inter with next/font/google. Next.js fetches the font files from fonts.gstatic.com at build time. Lexend, in the same file, already avoids this by loading a committed file with next/font/local.

Seen in: gofr-dev/gofr's Website Build check (website-pr.yml) on gofr-dev/gofr#4583, run https://github.com/gofr-dev/gofr/actions/runs/41670963807. That PR only changed Go imports and one docs page. The build failed with:

FetchError: request to https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa0ZL7W0Q5n-wU.woff2 failed
`next/font` error:
Failed to fetch `Inter` from Google Fonts.
> Build failed because of webpack errors

The same check passed on the previous run of that PR. The stage and prod workflows in gofr-dev/gofr build this site the same way, so a deploy can fail on this too.

Suggested fix: self-host Inter the way Lexend is already self-hosted.

  1. Commit Inter's variable-weight latin .woff2 (SIL Open Font License) to src/fonts/.
  2. In src/app/layout.jsx, replace Inter({ subsets: ['latin'], display: 'swap', variable: '--font-inter' }) with localFont({ src: '../fonts/inter.woff2', display: 'swap', variable: '--font-inter' }), and drop the next/font/google import.

The --font-inter CSS variable keeps its name, so no styles change. The build then makes no font requests at all. Visitors already get the font from the site's own origin, because next/font/google self-hosts the downloaded files, so the page itself does not change.

Related: #230 removes another build-time download (the sharp binary) for the same reason.

主要言語
JavaScript
スター
44
フォーク
44
30日以内にマージされた PR はありません

環境構築

  • Dockerfile または Docker Compose ファイルあり
  • プルリクエストのテンプレートなし
  • コントリビューションガイドなし

はじめの一歩

  1. issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
  2. 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
  3. リポジトリをフォークし、ブランチを切って変更します。
  4. issue 番号を参照したプルリクエストを送ります。

gofr-dev/website のほかの issue

gofr-dev/website の issue をすべて見る

似ている issue

JavaScript の issue をもっと見る

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。