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

Aperta Adatta ai principianti
  • Qualcosa non va?
#243 0 commenti 0 reazioni 0 assegnatari Vedi su GitHub

Nessuno ha ancora preso questa issue.

Valutazione

Difficoltà
2/5
Tempo stimato
1-3 ore
Idoneità per principianti
72/100
Tipo di issue
Bug
Chiarezza
Specificata chiaramente
Stato di attività
Attiva
Stack tecnologico
javascript, nextjs, react
Ambito
build-system, frontend

Direzione di ricerca

Il font viene caricato con next/font/google in src/app/layout.jsx; Lexend nello stesso file usa già next/font/local, quindi è il pattern da copiare. Committa un Inter .woff2 latin a peso variabile sotto src/fonts/, sostituisci la chiamata a Inter con localFont con le stesse impostazioni display e variable e rimuovi l'import di google. Completato quando npm run build termina con successo senza richieste a fonts.gstatic.com e la variabile --font-inter continua a risolversi.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Descrizione

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.

Lingua principale
JavaScript
Stelle
44
Fork
44
Nessuna PR unita negli ultimi 30g

Preparare l'ambiente

  • Include un Dockerfile o un file Docker Compose
  • Nessun modello di pull request
  • Nessuna guida per i contributori

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Altre issue di gofr-dev/website

Tutte le issue di gofr-dev/website

Issue simili

Altre issue su JavaScript

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.