F(frontend): bundle Vazirmatn locally

2026-05-20 11:45:08 +03:30
parent f23108cda3
commit f2d5b92b22
4 changed files with 12 additions and 7 deletions
--- a/src/app/fonts/Vazirmatn-variable.woff2
+++ b/src/app/fonts/Vazirmatn-variable.woff2
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,10 +1,19 @@
 import type { Metadata } from "next";
+import localFont from "next/font/local";
 import Navbar from "@/components/Navbar";
 import Footer from "@/components/Footer";
 import Providers from "@/components/providers";
 import { siteUrl } from "@/lib/site";
 import "../index.css";

+const vazirmatn = localFont({
+  src: "./fonts/Vazirmatn-variable.woff2",
+  display: "swap",
+  weight: "100 900",
+  variable: "--font-vazirmatn",
+  fallback: ["Tahoma", "Arial", "sans-serif"],
+});
+
 export const metadata: Metadata = {
  metadataBase: new URL(siteUrl),
  title: {
@@ -22,7 +31,7 @@ export default function RootLayout({
 }>) {
  return (
    <html lang="fa" dir="rtl" suppressHydrationWarning>
-      <body>
+      <body className={`${vazirmatn.variable} font-sans antialiased`}>
        <Providers>
          <Navbar />
          {children}
--- a/src/index.css
+++ b/src/index.css
@@ -2,10 +2,6 @@
@tailwind components;
@tailwind utilities;

-* {
-  font-family: 'Vazirmatn', sans-serif;
-}
-
 /* Definition of the design system. All colors, gradients, fonts, etc should be defined here. 
 All colors MUST be HSL.
 */
@@ -104,6 +100,6 @@ All colors MUST be HSL.
  }

  body {
-    @apply bg-background text-foreground;
+    @apply bg-background font-sans text-foreground;
  }
 }
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -15,7 +15,7 @@ export default {
    },
    extend: {
      fontFamily: {
-        sans: ['Vazirmatn', 'sans-serif'],
+        sans: ["var(--font-vazirmatn)", "Tahoma", "Arial", "sans-serif"],
      },
      colors: {
        border: "hsl(var(--border))",