Fonts not loading

Help
1

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>
  );
}

image
image1920×1114 112 KB

the issue persists on local dev and build but not on vercel

2

There’s another community post with 404 debugging tips that might be helpful. Please give these solutions a try and let us know how it goes.

A human should be around soon to offer more advice. But you can also get helpful information quickly by asking v0.

5

This topic was automatically closed 90 days after the last reply. New replies are no longer allowed.