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

Abierto Apto para principiantes
  • ¿Algo no está bien?
#243 0 comentarios 0 reacciones 0 asignados Ver en GitHub

Nadie ha tomado este issue todavía.

Evaluación

Dificultad
2/5
Tiempo estimado
1-3 horas
Aptitud para principiantes
72/100
Tipo de issue
Error
Claridad
Bien especificado
Estado de actividad
Activo
Stack tecnológico
javascript, nextjs, react
Área
build-system, frontend

Línea de trabajo

La fuente se carga con next/font/google en src/app/layout.jsx; Lexend en el mismo archivo ya usa next/font/local, así que ese es el patrón a copiar. Haz commit de un Inter .woff2 latin de peso variable en src/fonts/, reemplaza la llamada de Inter por localFont con las mismas opciones de display y variable, y elimina la importación de google. Terminado cuando npm run build se completa sin peticiones a fonts.gstatic.com y la variable --font-inter sigue resolviéndose.

Escrito por el modelo de indexación a partir del texto del issue.

Descripción

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.

Lenguaje dominante
JavaScript
Estrellas
44
Forks
44
Sin PR fusionados en 30 d

Preparar el entorno

  • Incluye un Dockerfile o un archivo de Docker Compose
  • Sin plantilla de pull request
  • Sin guía de contribución

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Más de gofr-dev/website

Todos los issues de gofr-dev/website

Issues similares

Más issues de JavaScript

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.