Next.js Discord

Discord Forum

next font not loading in production

Unanswered
Beveren posted this in #help-forum
Open in Discord
BeverenOP
Hello everyone, I got a weird bug. I am using a next/font/google that loads locally but not in production.

// layout.tsx
const fontRobotoSlab = Roboto_Slab({
subsets: ["latin"],
weight: ["400", "600", "700"],
variable: "--font-roboto-slab",
display: "swap",
});

// global.css
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: var(--font-roboto-slab), serif;
}

It is loading the font but not using it.
I am using docker and standalone mode to deploy it in a VPS server

15 Replies

check your build logs also once
Knopper gall
I just got an issue with google font locally, I will make my own post and report on it if I find anything
Knopper gall
@Beveren you can check my issue in this forum, it might be unrelated but still worth looking at I think. tldr empty google import is now causing issues in my case:
/*@import url("https://fonts.googleapis.com");*/
BeverenOP
No the fonts do load. I can see them in the network tab. But they don't render. I get Failed to decode downloaded font but only when I deploy. Locally they do work. I think its a docker issue
Actually im not sure how it would be a docker issue when the fonts do load in the browser
Are u using tailwind?
BeverenOP
# Use Node.js LTS with multi-arch support (works on Raspberry Pi 64-bit)
FROM node:20-alpine AS base
ENV PNPM_HOME="/pnpm"
ENV PATH="$PNPM_HOME:$PATH"
RUN apk add --no-cache libc6-compat && \
    corepack enable && \
    pnpm install turbo --global
 
FROM base AS builder
RUN apk add --no-cache openssl
WORKDIR /app
COPY . .
RUN turbo prune --scope=web --docker
 
FROM base AS installer
WORKDIR /app

# Full workspace so we can build studio then web (studio builds into web/public)
COPY --from=builder /app/package.json ./
COPY --from=builder /app/pnpm-lock.yaml ./
COPY --from=builder /app/pnpm-workspace.yaml ./
COPY --from=builder /app/turbo.json ./
COPY --from=builder /app/out/full/ .
COPY --from=builder /app/apps/studio ./apps/studio
COPY --from=builder /app/packages ./packages
COPY --from=builder /app/apps/web/public ./apps/web/public 
RUN pnpm install --frozen-lockfile

# Build studio into apps/web/public/studio, then build web (standalone)
COPY apps/web/.env ./apps/web/.env
COPY apps/studio/.env ./apps/studio/.env
RUN set -a && . ./apps/studio/.env && set +a && pnpm --filter studio build
RUN set -a && . ./apps/web/.env && set +a && turbo run build --filter=web...
 
FROM base AS runner
WORKDIR /app
 
RUN addgroup --system --gid 1001 website
RUN adduser --system --uid 1001 nextjs
USER nextjs
 
COPY --from=installer /app/apps/web/next.config.ts .
COPY --from=installer /app/apps/web/package.json .
 
COPY --from=installer --chown=nextjs:website /app/apps/web/.next/standalone ./
COPY --from=installer --chown=nextjs:website /app/apps/web/.next/static ./apps/web/.next/static
COPY --from=installer --chown=nextjs:website /app/apps/web/public ./apps/web/public

EXPOSE 3000

ENV PORT=3000
ENV HOSTNAME="0.0.0.0"

CMD node apps/web/server.js
I feel like the fonts get corrupted somehow, because they do work locally
the fonts are in the public folder
Saint Hubert Jura Hound
Is the screenshot u attached from localhost? If not theyre definitely not corrupted and more likely has to do with how you load/apply the fonts
@Anay-208 check your build logs also once
Anay-208
can u normally run build in your VPS first and start to see if it works? so we can like narrow down the issue to see if its caused due to the docker
@Saint Hubert Jura Hound Is the screenshot u attached from localhost? If not theyre definitely not corrupted and more likely has to do with how you load/apply the fonts
BeverenOP
No thats from the production.
This is how I load the fonts:

const fontRobotoSlab = localFont({
  src: [
    {
      path: "../../public/fonts/RobotoSlab-Regular.ttf",
      weight: "400",
      style: "normal",
    },
    {
      path: "../../public/fonts/RobotoSlab-Bold.ttf",
      weight: "600",
      style: "normal",
    },
  ],
  variable: "--font-roboto-slab",
  display: "swap",
});

const fontInter = localFont({
  src: [
    {
      path: "../../public/fonts/Inter_18pt-Regular.ttf",
      weight: "400",
      style: "normal",
    },
    {
      path: "../../public/fonts/Inter_18pt-Italic.ttf",
      weight: "400",
      style: "italic",
    },
    {
      path: "../../public/fonts/Inter_18pt-Medium.ttf",
      weight: "600",
      style: "normal",
    },
    {
      path: "../../public/fonts/Inter_18pt-MediumItalic.ttf",
      weight: "600",
      style: "italic",
    },
    {
      path: "../../public/fonts/Inter_18pt-Bold.ttf",
      weight: "700",
      style: "normal",
    },
    {
      path: "../../public/fonts/Inter_18pt-BlackItalic.ttf",
      weight: "700",
      style: "italic",
    },
  ],
  variable: "--font-inter",
  display: "swap",
});


Everything loads but I get Failed to decode downloaded font: and it renders Arial font