Refactor font handling by replacing Google Fonts CDN with self-hosted Inter font

- Added local Inter font to improve build reliability and eliminate intermittent failures.
- Updated relevant components to use the new local font import.

Author: eibrahim

CHANGELOG.md

@@ -3,6 +3,13 @@
 All notable changes to this project will be documented in this file.
 
 ## [unreleased]
+### Added
+
+### Changed
+- Replaced Google Fonts CDN with self-hosted Inter font to fix intermittent build failures
+
+### Fixed
+
 
 ## [1.2.2] 2025-03-18
 ### Added

public/fonts/inter/Inter-V.ttf

@@ -1,7 +1,7 @@
 "use client";
 
 import { useState, useEffect } from "react";
-import { Inter } from "next/font/google";
+import { inter } from "@/lib/fonts";
 import "../globals.css";
 import { cn } from "@/lib/utils";
 import { SessionProvider } from "@/components/providers/SessionProvider";
@@ -35,8 +35,6 @@ const NotificationProvider = dynamic<{ children: React.ReactNode }>(
   }
 );
 
-const inter = Inter({ subsets: ["latin"] });
-
 const getTitleFromPathname = (pathname: string) => {
   switch (pathname) {
     case "/":

src/app/(common)/layout.tsx

@@ -1,10 +1,7 @@
-import { Inter } from "next/font/google";
+import { inter } from "@/lib/fonts";
 import "@/app/globals.css";
 import { ThemeProvider } from "@/components/providers/ThemeProvider";
 
-
-const inter = Inter({ subsets: ["latin"] });
-
 export default function OpenSourceHomeLayout({
   children,
 }: {

src/app/(open)/layout.open.tsx

@@ -1,12 +1,10 @@
 "use client";
 
-import { Inter } from "next/font/google";
+import { inter } from "@/lib/fonts";
 import "../app/globals.css";
 import Link from "next/link";
 import { useEffect, useState } from "react";
 
-const inter = Inter({ subsets: ["latin"] });
-
 export default function Error({
   error,
   reset,

src/app/error.tsx

@@ -1,11 +1,9 @@
 "use client";
 
-import { Inter } from "next/font/google";
+import { inter } from "@/lib/fonts";
 import "../app/globals.css";
 import { useEffect, useState } from "react";
 
-const inter = Inter({ subsets: ["latin"] });
-
 export default function Loading() {
   // Use client-side rendering to avoid hydration issues
   const [mounted, setMounted] = useState(false);

src/app/loading.tsx

@@ -1,12 +1,10 @@
 "use client";
 
 import Link from "next/link";
-import { Inter } from "next/font/google";
+import { inter } from "@/lib/fonts";
 import "../app/globals.css";
 import { useEffect, useState } from "react";
 
-const inter = Inter({ subsets: ["latin"] });
-
 export default function NotFound() {
   // Use client-side rendering to avoid hydration issues
   const [mounted, setMounted] = useState(false);

src/app/not-found.tsx

@@ -0,0 +1,8 @@
+import localFont from "next/font/local";
+
+// Load Inter font from local files
+export const inter = localFont({
+  src: "../../public/fonts/inter/Inter-V.ttf",
+  variable: "--font-inter",
+  display: "swap",
+});