refactor: change the way font was implemented to localFonts

fulcain · fulcain · commit e7f424d99b87 · 2025-02-09T13:45:51.000+03:30
After doing more research I found out the best way is using the
localFont and not use the css file directly
diff --git a/src/app/globals.css b/src/app/globals.css
@@ -69,7 +69,6 @@
 body {
   color: var(--foreground);
   background: var(--background);
-  font-family: "DanaVariableFont";
 }
 
 @layer base {
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -1,13 +1,26 @@
-import "../../public/fonts/dana/dana.css";
 import "./globals.css";
 import { ThemeProvider } from "@/components/contexts/theme-provider";
 import type { Metadata } from "next";
+import localFont from "next/font/local";
 
 export const metadata: Metadata = {
   title: "فرانت چپتر | محلی صمیمی برای گفت و گو",
   description: "Generated by create next app",
 };
 
+const danaVF = localFont({
+  src: [
+    {
+      path: "../../public/fonts/dana/DanaVF.woff2",
+      weight: "100 900",
+      style: "normal",
+    },
+  ],
+  variable: "--font-dana",
+  display: "swap",
+  fallback: ["Tahoma", "sans-serif"],
+});
+
 export default function RootLayout({
   children,
 }: Readonly<{
@@ -18,7 +31,7 @@ export default function RootLayout({
       lang="fa-IR"
       dir="rtl"
       style={{ colorScheme: "dark" }}
-      className="dark"
+      className={`dark ${danaVF.variable}`}
     >
       <body className="bg-background antialiased">
         <ThemeProvider>{children}</ThemeProvider>

Original file line number	Diff line number	Diff line change
`@@ -69,7 +69,6 @@`
`69`	`69`	`body {`
`70`	`70`	`color: var(--foreground);`
`71`	`71`	`background: var(--background);`
`72`		`- font-family: "DanaVariableFont";`
`73`	`72`	`}`
`74`	`73`
`75`	`74`	`@layer base {`