Next.js Discord

Discord Forum

Font styles and overall styles messed up on production

Unanswered
In&Out posted this in #help-forum
Open in Discord
In&OutOP
Hey folks, i have errors with fonts. I have a local font but it doesnt work on production, even tho it works in dev, why?

4 Replies

In&OutOP
import "@mantine/core/styles.css";
import "@mantine/carousel/styles.css";
import { MantineProvider } from "@mantine/core";
import type { Metadata } from "next";
import "./globals.css";
import localFont from "next/font/local";

export const neueMontreal = localFont({
  src: [
    { path: "../public/fonts/Satoshi-Light.woff", weight: "300", style: "normal" },
    { path: "../public/fonts/Satoshi-Regular.woff", weight: "400", style: "normal" },
    { path: "../public/fonts/Satoshi-Medium.woff", weight: "500", style: "normal" },
    { path: "../public/fonts/Satoshi-Bold.woff", weight: "600", style: "normal" },
    { path: "../public/fonts/Satoshi-Black.woff", weight: "700", style: "normal" },
  ],
  variable: "--font-neue",
  display: "swap",
});

const defaultUrl = process.env.VERCEL_URL
  ? `https://${process.env.VERCEL_URL}`
  : "http://localhost:3000";

export const metadata: Metadata = {
  metadataBase: new URL(defaultUrl),
  title: "Next.js and Supabase Starter Kit",
  description: "The fastest way to build apps with Next.js and Supabase",
};

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en" className={neueMontreal.variable} suppressHydrationWarning>
      <body className="font-sans antialiased">
        <MantineProvider>{children}</MantineProvider>
      </body>
    </html>
  );
}
## Also
I have another issue with using UI library Mantine, on dev it all works well but again, when im in production the styles are not applied, why?
In&OutOP
Nevermind, fixed fonts stuff but mantine is still breaking