#Next.js build in GitHub Actions fails due to failed Google Fonts fetching

1 messages · Page 1 of 1 (latest)

wise adder
#

I'm experiencing an issue when building my Next.js project in GitHub Actions. The build process gets stuck for several minutes while trying to fetch Google Fonts, and sometimes it fails completely. Here is the relevant error log:

#12 10.13    Creating an optimized production build ...
#12 52.98 request to https://fonts.gstatic.com/s/ubuntu/v20/4iCv6KVjbNBYlgoC1CzjvWyNPYZvg7UI.woff2 failed, reason: 
#12 52.98 
#12 52.98 Retrying 1/3...
#12 52.99 request to https://fonts.gstatic.com/s/ubuntu/v20/4iCv6KVjbNBYlgoC1CzjtGyNPYZvg7UI.woff2 failed, reason: 
#12 52.99 
#12 52.99 Retrying 1/3...
#12 52.99 request to https://fonts.gstatic.com/s/ubuntu/v20/4iCv6KVjbNBYlgoC1CzjvGyNPYZvg7UI.woff2 failed, reason: 
#12 52.99 
#12 52.99 Retrying 1/3...
#12 53.00 request to https://fonts.gstatic.com/s/ubuntu/v20/4iCv6KVjbNBYlgoC1Czjs2yNPYZvg7UI.woff2 failed, reason: 
#12 53.00 
#12 53.00 Retrying 1/3...
#12 53.01 request to https://fonts.gstatic.com/s/ubuntu/v20/4iCv6KVjbNBYlgoC1CzjvmyNPYZvg7UI.woff2 failed, reason: 
#12 53.01 
#12 53.01 Retrying 1/3...
#12 53.01 request to https://fonts.gstatic.com/s/ubuntu/v20/4iCv6KVjbNBYlgoC1CzjsGyNPYZvgw.woff2 failed, reason: 
#12 53.01 
#12 53.01 Retrying 1/3...
#12 53.02 request to https://fonts.gstatic.com/s/ubuntu/v20/4iCs6KVjbNBYlgoKew72nU6AF7xm.woff2 failed, reason: 
.
.
.

It retries multiple times, and in some cases, it succeeds after ~7 minutes. However, occasionally, the build fails entirely because it cannot fetch the fonts.

Running the build locally works fine. Any ideas on how to shorten the build time and fix this error?

regal trellisBOT
#
Post created!

🔎 This post has been indexed in our web forum and will be seen by search engines so other users can find it outside Discord

🕵️ Your user profile is private by default and won't be visible to users outside Discord, if you want to be visible in the web forum you can add the "Public Profile" role in id:customize

✅ You can mark a message as the answer for your post with Right click -> Apps -> Mark Solution
(if you don't see the option, try refreshing Discord with Ctrl + R)

wise adder
#

This is how I import the fonts in my Next.js project:

import "../styles/globals.css";
import "../styles/Main.scss";
import Head from "./head";
import NextAuthSessionProvider from "./SessionProvider";
import { Oswald, Ubuntu, Play } from 'next/font/google';

const oswald = Oswald({ subsets: ['latin'] });
const ubuntu = Ubuntu({ weight: ['300', '400', '500', '700'], subsets: ['latin'] });
const play = Play({ weight: ['400', '700'], subsets: ['latin'] });

export default function RootLayout({ children }) {
  return (
    <html lang="en" className={`${oswald.className} ${ubuntu.className} ${play.className}`}>
      <Head />
      <body>
        <NextAuthSessionProvider>
          {children}
        </NextAuthSessionProvider>
      </body>
    </html>
  );
}
junior vigil
#

Its definitely not an issue with your code, are you able to share a copy of your CI file?

wise adder
# junior vigil Its definitely not an issue with your code, are you able to share a copy of your...

yeah, sure

code docker-publish.yml:

name: Docker
on:
  push:
    tags: [ 'v*.*.*' ]
env:
  REGISTRY: ghcr.io
  IMAGE_NAME: ${{ github.repository }}
jobs:
  build:
    runs-on: ubuntu-latest
    permissions:
      contents: read
      packages: write
      id-token: write
    steps:
      - name: Checkout repository
        uses: actions/checkout@v4
      - name: Install cosign
        if: github.event_name != 'pull_request'
        uses: sigstore/cosign-installer@59acb6260d9c0ba8f4a2f9d9b48431a222b68e20 #v3.5.0
        with:
          cosign-release: 'v2.2.4'
      - name: Set up Docker Buildx
        uses: docker/setup-buildx-action@f95db51fddba0c2d1ec667646a06c2ce06100226 # v3.0.0
      - name: Log into registry ${{ env.REGISTRY }}
        if: github.event_name != 'pull_request'
        uses: docker/login-action@343f7c4344506bcbf9b4de18042ae17996df046d # v3.0.0
        with:
          registry: ${{ env.REGISTRY }}
          username: ${{ github.actor }}
          password: ${{ secrets.GITHUB_TOKEN }}
      - name: Extract Docker metadata
        id: meta
        uses: docker/metadata-action@96383f45573cb7f253c731d3b3ab81c87ef81934 # v5.0.0
        with:
          images: ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}
      - name: Build and push Docker image
        id: build-and-push
        uses: docker/build-push-action@0565240e2d4ab88bba5387d719585280857ece09 # v5.0.0
        with:
          context: .
          push: ${{ github.event_name != 'pull_request' }}
          tags: ${{ steps.meta.outputs.tags }}
          labels: ${{ steps.meta.outputs.labels }}
          platforms: linux/arm64
          cache-from: type=gha
          cache-to: type=gha,mode=max

      - name: Sign the published Docker image
        if: ${{ github.event_name != 'pull_request' }}
        env:
          TAGS: ${{ steps.meta.outputs.tags }}
          DIGEST: ${{ steps.build-and-push.outputs.digest }}
        run: echo "${TAGS}" | xargs -I {} cosign sign --yes {}@${DIGEST}
junior vigil
#

I would try the suggestion laid out here:

https://stackoverflow.com/a/76484168/5156025

I'm not sure whether this will help solve the build time issue though. It also seems to be a regular reoccurring issue so it looks like it is a known bug as its reported a few times here: https://github.com/vercel/next.js/discussions/47009

Stack Overflow
Next.js always fail at downloading fonts from Google Fonts

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:
FetchError: reques...

GitHub
next/font/google download timeout should be configurable · vercel n...

Goals In development mode, if I'm not mistaken, downloading a font from Google times out after 3 seconds. This value should be configurable to account for a variety of environments. Non-Goals N...