Fix Render build: load Google Fonts via link instead of next/font

src/app/layout.tsx

@@ -1,11 +1,12 @@
 import type { Metadata, Viewport } from "next";
-import { Space_Grotesk, Inter, IBM_Plex_Mono } from "next/font/google";
 import "./globals.css";
 import { ToastProvider } from "@/components/ui/Toast";
 
-const display = Space_Grotesk({ subsets: ["latin"], variable: "--font-display", weight: ["500", "700"] });
+// We deliberately do NOT use `next/font/google` here. That loader downloads
-const body = Inter({ subsets: ["latin"], variable: "--font-body", weight: ["400", "500", "600"] });
+// fonts at build time, which fails in restricted build environments (e.g.
-const mono = IBM_Plex_Mono({ subsets: ["latin"], variable: "--font-mono", weight: ["400", "500"] });
+// Render) with "Cannot read properties of null (reading '1')". Instead we
+// load the same fonts via a standard <link> at runtime. The matching CSS
+// variables live in globals.css, so the typography is unchanged.
 
 export const metadata: Metadata = {
   title: "Vessel — Branch Delivery Console",
@@ -21,10 +22,18 @@ export const viewport: Viewport = {
 
 export default function RootLayout({ children }: { children: React.ReactNode }) {
   return (
-    <html lang="en" className={display.variable + " " + body.variable + " " + mono.variable}>
+    <html lang="en">
+      <head>
+        <link rel="preconnect" href="https://fonts.googleapis.com" />
+        <link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="anonymous" />
+        <link
+          href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;700&family=Inter:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap"
+          rel="stylesheet"
+        />
+      </head>
       <body>
         <ToastProvider>{children}</ToastProvider>
       </body>
     </html>
   );
-}
+}