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

Đang mở Phù hợp với người mới
  • Có gì không ổn?
#243 0 bình luận 0 reaction 0 người được giao Xem trên GitHub

Chưa có ai nhận issue này.

Đánh giá

Độ khó
2/5
Thời gian dự kiến
1-3 giờ
Mức phù hợp với người mới
72/100
Loại issue
Lỗi
Độ rõ ràng
Đặc tả rõ ràng
Mức độ hoạt động
Sôi nổi
Công nghệ
javascript, nextjs, react
Lĩnh vực
build-system, frontend

Hướng nghiên cứu

Font được tải bằng next/font/google trong src/app/layout.jsx; Lexend trong cùng tệp đã dùng next/font/local, nên đó là mẫu cần sao chép. Commit một tệp Inter .woff2 latin có trọng số biến đổi vào src/fonts/, thay lệnh gọi Inter bằng localFont với cùng các thiết lập display và variable, và xóa import google. Hoàn tất khi npm run build thành công mà không có yêu cầu nào tới fonts.gstatic.com và biến --font-inter vẫn được phân giải.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.

Mô tả

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.

Ngôn ngữ chính
JavaScript
Star
44
Fork
44
Không có pull request nào được merge trong 30 ngày

Chuẩn bị môi trường

  • Có Dockerfile hoặc tệp Docker Compose
  • Không có mẫu pull request
  • Không có hướng dẫn đóng góp

Bắt đầu từ đâu

  1. Đọc hết issue, rồi đọc hướng dẫn đóng góp của dự án.
  2. Bình luận trên issue rằng bạn sẽ nhận — tránh hai người làm cùng một việc.
  3. Fork repository và làm thay đổi trên một nhánh.
  4. Mở pull request có tham chiếu số hiệu của issue.

Issue khác của gofr-dev/website

Tất cả issue của gofr-dev/website

Issue tương tự

Thêm issue về JavaScript

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.