Next.js Discord

Discord Forum

Font stopped loading ?

Unanswered
mihir posted this in #help-forum
Open in Discord
mihirOP
Help me font suddenly stopped working

33 Replies

mihirOP
what do i do
help pls
!=tgt
What is your layout.tsx?
@mihir
mihirOP
i havent touched it
since last time
but i am using poppins
import type { Metadata } from "next"
import { Poppins as FontSans } from "next/font/google"
import "./globals.css"

import { ThemeProvider } from "@/components/theme-provider"
import { cn } from "@/lib/utils"
import { siteConfig } from "@/config/site"
import { Footer } from "@/components/footer"
import { SessionProvider } from "next-auth/react"
import { auth } from "@/auth"

const fontSans = FontSans({
  subsets: ["latin"],
  weight: ["100", "200", "300", "400", "500", "600", "700", "800", "900"],
  variable: "--font-sans",
})

export const metadata: Metadata = {
  title: siteConfig.name,
  description: siteConfig.description,
}

const RootLayout = async ({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) => {
  const session = await auth()
  return (
    <SessionProvider session={session}>
    <html lang="en">
      <body className={cn("min-h-screen bg-background font-sans antialiased",fontSans.variable)}>
        <ThemeProvider
          attribute="class"
          defaultTheme="system"
          enableSystem
          disableTransitionOnChange
        >
          {children}
          <div className="px-3 py-2">
          <Footer/>
          </div>
        </ThemeProvider>
      </body>
    </html>
    </SessionProvider>
  )
}

export default RootLayout
mihirOP
import type { Config } from "tailwindcss"
import { fontFamily } from "tailwindcss/defaultTheme"


const config = {
darkMode: ["class"],
content: [
'./pages//*.{ts,tsx}',
'./components//.{ts,tsx}',
'./app/**/.{ts,tsx}',
'./src/*/.{ts,tsx}',
],
prefix: "",
theme: {
container: {
center: true,
padding: "2rem",
screens: {
"2xl": "1400px",
},
},
extend: {
fontFamily :{
sans: ["var(--font-sans)", ...fontFamily.sans],
},
colors: {
border: "hsl(var(--border))",
input: "hsl(var(--input))",
ring: "hsl(var(--ring))",
background: "hsl(var(--background))",
foreground: "hsl(var(--foreground))",
primary: {
DEFAULT: "hsl(var(--primary))",
foreground: "hsl(var(--primary-foreground))",
},
secondary: {
DEFAULT: "hsl(var(--secondary))",
foreground: "hsl(var(--secondary-foreground))",
},
destructive: {
DEFAULT: "hsl(var(--destructive))",
foreground: "hsl(var(--destructive-foreground))",
},
muted: {
DEFAULT: "hsl(var(--muted))",
i havent edited anything it was all working just fine
all the sudden its messed up
no logs or anything?
mihirOP
nop
nothing
no errors
just no font all the sudden
@mihir nop
!=tgt
try using 
      fontFamily: {
        sans: ["var(--font-sans)"],
      },

in your tailwind config instead
mihirOP
did nothing
@mihir did nothing
!=tgt
wait
could cn be breaking things?
mihirOP
might be lemme see ?
!=tgt
try removing the font-sans class from the alyout
mihirOP
no didnt work
i used this
className={min-h-screen bg-background font-sans antialiased ${fontSans.variable}}
instead of cn()
mihirOP
@!=tgt its only happening on localhost
when i uploaded on git vercel works fine
mihirOP
@!=tgt ChunkLoadError: Loading chunk app/layout failed.
(timeout: http://localhost:3000/_next/static/chunks/app/layout.js)