fonts not loading

Unanswered

astro posted this in #help-forum

Open in Discord

2025-07-23T12:21:46.776Z

so im loading inter font via next/font/google and though i have a strong internet connection it is throwing 404, i tried visiting the google fonts api manually in my browser and it did respond with the css code, but the next app is unable to load font

// layout.tsx

import "~/styles/globals.css";

import { type Metadata } from "next";
import { Inter } from "next/font/google";

export const metadata: Metadata = {
  title: "Create T3 App",
  description: "Generated by create-t3-app",
  icons: [{ rel: "icon", url: "/favicon.ico" }],
};

const inter = Inter({
  subsets: ["latin"],
  display: "swap",
  variable: "--font-inter",
});

export default function RootLayout({
  children,
}: Readonly<{ children: React.ReactNode }>) {
  return (
    <html lang="en" className={`${inter.variable}`}>
      <body>{children}</body>
    </html>
  );
}

12 Replies

2025-07-23T12:25:47.522Z

this doesnt happen in prod btw

@astro so im loading inter font via next/font/google and though i have a strong internet connection it is throwing 404, i tried visiting the google fonts api manually in my browser and it did respond with the css code, but the next app is unable to load font tsx // layout.tsx import "~/styles/globals.css"; import { type Metadata } from "next"; import { Inter } from "next/font/google"; export const metadata: Metadata = { title: "Create T3 App", description: "Generated by create-t3-app", icons: [{ rel: "icon", url: "/favicon.ico" }], }; const inter = Inter({ subsets: ["latin"], display: "swap", variable: "--font-inter", }); export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode }>) { return ( <html lang="en" className={`${inter.variable}`}> <body>{children}</body> </html> ); }

American Sable

2025-07-23T12:29:49.238Z

thats happening to me a lot

so thats not just me having that issue?

2025-07-23T12:30:20.850Z

probably

@American Sable so thats not just me having that issue?

2025-07-23T12:30:25.163Z

does it load in prod?

like when you build and run

or on vercel

@astro does it load in prod?

American Sable

2025-07-23T12:34:05.740Z

i have yet to experience it in prod.

it only happens in dev

a lot

prod seems to work fine

Northeast Congo Lion

2025-07-30T23:48:23.447Z

next/font doesn’t load fonts directly from Google at runtime it downloads them at build time and serves them from your own app