From 19b2c86be34111c748b31189b8cd33e2c24e4ad1 Mon Sep 17 00:00:00 2001
From: marzban-dev <marzban.dev@gmail.com>
Date: Sat, 14 Dec 2024 18:21:16 +0330
Subject: [PATCH] Add iran yekan x fonts

---
 frontend/assets/css/fonts/iran-yekan-x.css | 89 ++++++++++++++++++++++
 frontend/assets/css/tailwind.css           |  5 +-
 frontend/assets/css/typo.utils.css         | 46 +++++------
 frontend/layouts/Default.vue               |  2 +-
 frontend/nuxt.config.ts                    | 46 ++++++-----
 5 files changed, 138 insertions(+), 50 deletions(-)
 create mode 100644 frontend/assets/css/fonts/iran-yekan-x.css

diff --git a/frontend/assets/css/fonts/iran-yekan-x.css b/frontend/assets/css/fonts/iran-yekan-x.css
new file mode 100644
index 0000000..c4a82e4
--- /dev/null
+++ b/frontend/assets/css/fonts/iran-yekan-x.css
@@ -0,0 +1,89 @@
+@layer base {
+    @font-face {
+        font-family: "IRANYekanXVF";
+        src: url("/fonts/IranYekanX/IRANYekanX-Thin.woff2");
+        font-weight: 100;
+        font-style: normal;
+        font-display: swap;
+    }
+
+    @font-face {
+        font-family: "IRANYekanXVF";
+        src: url("/fonts/IranYekanX/IRANYekanX-UltraLight.woff2");
+        font-weight: 200;
+        font-style: normal;
+        font-display: swap;
+    }
+
+    @font-face {
+        font-family: "IRANYekanXVF";
+        src: url("/fonts/IranYekanX/IRANYekanX-Light.woff2");
+        font-weight: 300;
+        font-style: normal;
+        font-display: swap;
+    }
+
+    @font-face {
+        font-family: "IRANYekanXVF";
+        src: url("/fonts/IranYekanX/IRANYekanX-Regular.woff2");
+        font-weight: 400;
+        font-style: normal;
+        font-display: swap;
+    }
+
+    @font-face {
+        font-family: "IRANYekanXVF";
+        src: url("/fonts/IranYekanX/IRANYekanX-Medium.woff2");
+        font-weight: 500;
+        font-style: normal;
+        font-display: swap;
+    }
+
+    @font-face {
+        font-family: "IRANYekanXVF";
+        src: url("/fonts/IranYekanX/IRANYekanX-DemiBold.woff2");
+        font-weight: 600;
+        font-style: normal;
+        font-display: swap;
+    }
+
+    @font-face {
+        font-family: "IRANYekanXVF";
+        src: url("/fonts/IranYekanX/IRANYekanX-Bold.woff2");
+        font-weight: 700;
+        font-style: normal;
+        font-display: swap;
+    }
+
+    @font-face {
+        font-family: "IRANYekanXVF";
+        src: url("/fonts/IranYekanX/IRANYekanX-ExtraBold.woff2");
+        font-weight: 800;
+        font-style: normal;
+        font-display: swap;
+    }
+
+    @font-face {
+        font-family: "IRANYekanXVF";
+        src: url("/fonts/IranYekanX/IRANYekanX-Black.woff2");
+        font-weight: 900;
+        font-style: normal;
+        font-display: swap;
+    }
+
+    @font-face {
+        font-family: "IRANYekanXVF";
+        src: url("/fonts/IranYekanX/IRANYekanX-ExtraBlack.woff2");
+        font-weight: 950;
+        font-style: normal;
+        font-display: swap;
+    }
+
+    @font-face {
+        font-family: "IRANYekanXVF";
+        src: url("/fonts/IranYekanX/IRANYekanX-Heavy.woff2");
+        font-weight: 1000;
+        font-style: normal;
+        font-display: swap;
+    }
+}
\ No newline at end of file
diff --git a/frontend/assets/css/tailwind.css b/frontend/assets/css/tailwind.css
index d5f4c30..66e087e 100644
--- a/frontend/assets/css/tailwind.css
+++ b/frontend/assets/css/tailwind.css
@@ -4,6 +4,7 @@
 @import "./typo.utils.css";
 @import "./button.comp.css";
 @import "./input.comp.css";
+@import "./fonts/iran-yekan-x.css"
 
 @theme {
     /* COLORS */
@@ -107,7 +108,7 @@
     --font-lato: "Lato", sans-serif;
     --font-inter: "Inter", sans-serif;
     --font-dmsans: "DM Sans", sans-serif;
-    --font-iran-yekan-x: "IRANYekanXVF, sans-serif";
+    --font-iran-yekan-x: "IRANYekanXVF", "sans-serif";
 
     /* BREAKPOINTS */
     --breakpoint-3xl: 1700px;
@@ -132,4 +133,4 @@
     @screen xl {
         padding-inline: 5rem;
     }
-}
+}
\ No newline at end of file
diff --git a/frontend/assets/css/typo.utils.css b/frontend/assets/css/typo.utils.css
index e79ee73..a8fa5c7 100644
--- a/frontend/assets/css/typo.utils.css
+++ b/frontend/assets/css/typo.utils.css
@@ -1,96 +1,96 @@
 /* TYPO HERO */
 @utility typo-hero-1 {
-    @apply text-[96px] leading-[96px] font-bold font-dmsans;
+    @apply text-[96px] leading-[96px] font-bold ;
 }
 
 @utility typo-hero-2 {
-    @apply text-[72px] leading-[72px] font-bold font-dmsans;
+    @apply text-[72px] leading-[72px] font-bold ;
 }
 
 /* TYPE HEADING */
 @utility typo-h-1 {
-    @apply text-[64px] leading-[72px] font-bold font-dmsans;
+    @apply text-[64px] leading-[72px] font-bold ;
 }
 
 @utility typo-h-2 {
-    @apply text-[56px] leading-[64px] font-bold font-dmsans;
+    @apply text-[56px] leading-[64px] font-bold ;
 }
 
 @utility typo-h-3 {
-    @apply text-[48px] leading-[56px] font-bold font-dmsans;
+    @apply text-[48px] leading-[56px] font-bold ;
 }
 
 @utility typo-h-4 {
-    @apply text-[40px] leading-[52px] font-bold font-inter;
+    @apply text-[40px] leading-[52px] font-bold ;
 }
 
 @utility typo-h-5 {
-    @apply text-[32px] leading-[40px] font-bold font-inter;
+    @apply text-[32px] leading-[40px] font-bold ;
 }
 
 @utility typo-h-6 {
-    @apply text-[24px] leading-[32px] font-bold font-inter;
+    @apply text-[24px] leading-[32px] font-bold ;
 }
 
 /* TYPE SUBHEADING */
 @utility typo-sub-h-xl {
-    @apply text-[20px] leading-[24px] font-semibold font-inter;
+    @apply text-[20px] leading-[24px] font-semibold ;
 }
 
 @utility typo-sub-h-lg {
-    @apply text-[18px] leading-[24px] font-semibold font-inter;
+    @apply text-[18px] leading-[24px] font-semibold ;
 }
 
 @utility typo-sub-h-md {
-    @apply text-[16px] leading-[20px] font-semibold font-inter;
+    @apply text-[16px] leading-[20px] font-semibold ;
 }
 
 @utility typo-sub-h-sm {
-    @apply text-[14px] leading-[20px] font-semibold font-inter;
+    @apply text-[14px] leading-[20px] font-semibold ;
 }
 
 @utility typo-sub-h-xs {
-    @apply text-[12px] leading-[16px] font-semibold font-inter;
+    @apply text-[12px] leading-[16px] font-semibold ;
 }
 
 /* TYPE PARAGRAPH */
 @utility typo-p-2xl {
-    @apply text-[24px] leading-[40px] font-light font-inter;
+    @apply text-[24px] leading-[40px] font-light ;
 }
 
 @utility typo-p-xl {
-    @apply text-[20px] leading-[32px] font-light font-inter;
+    @apply text-[20px] leading-[32px] font-light ;
 }
 
 @utility typo-p-lg {
-    @apply text-[18px] leading-[32px] font-light font-inter;
+    @apply text-[18px] leading-[32px] font-light ;
 }
 
 @utility typo-p-md {
-    @apply text-[16px] leading-[28px] font-light font-inter;
+    @apply text-[16px] leading-[28px] font-light ;
 }
 
 @utility typo-p-sm {
-    @apply text-[14px] leading-[24px] font-light font-inter;
+    @apply text-[14px] leading-[24px] font-light ;
 }
 
 @utility typo-p-xs {
-    @apply text-[12px] leading-[16px] font-light font-inter;
+    @apply text-[12px] leading-[16px] font-light ;
 }
 
 /* TYPO LABEL */
 @utility typo-label-lg {
-    @apply text-[18px] leading-[24px] font-medium font-inter;
+    @apply text-[18px] leading-[24px] font-medium ;
 }
 
 @utility typo-label-md {
-    @apply text-[16px] leading-[24px] font-medium font-inter;
+    @apply text-[16px] leading-[24px] font-medium ;
 }
 
 @utility typo-label-sm {
-    @apply text-[14px] leading-[20px] font-medium font-inter;
+    @apply text-[14px] leading-[20px] font-medium ;
 }
 
 @utility typo-label-xs {
-    @apply text-[12px] leading-[16px] font-medium font-inter;
+    @apply text-[12px] leading-[16px] font-medium ;
 }
\ No newline at end of file
diff --git a/frontend/layouts/Default.vue b/frontend/layouts/Default.vue
index 84ac262..cc6c41b 100644
--- a/frontend/layouts/Default.vue
+++ b/frontend/layouts/Default.vue
@@ -11,7 +11,7 @@
 </script>
 
 <template>
-    <div class="w-full flex flex-col-center font-dmsans" dir="rtl">
+    <div class="w-full flex flex-col-center font-iran-yekan-x" dir="rtl">
         <Header />
         <main class="w-full overflow-x-hidden container">
             <slot />
diff --git a/frontend/nuxt.config.ts b/frontend/nuxt.config.ts
index ba5d513..9fee81b 100644
--- a/frontend/nuxt.config.ts
+++ b/frontend/nuxt.config.ts
@@ -3,20 +3,22 @@ export default defineNuxtConfig({
     compatibilityDate: "2024-11-01",
     ssr: false,
     devtools: { enabled: false },
-    css: ["~/assets/css/tailwind.css"],
+    css: [
+        "~/assets/css/tailwind.css",
+    ],
 
     postcss: {
         plugins: {
             "@tailwindcss/postcss": {},
-            autoprefixer: {},
-        },
+            autoprefixer: {}
+        }
     },
 
     components: [
         {
             path: "~/components",
-            pathPrefix: false,
-        },
+            pathPrefix: false
+        }
     ],
 
     icon: {
@@ -24,24 +26,20 @@ export default defineNuxtConfig({
         customCollections: [
             {
                 prefix: "ci",
-                dir: "./public/icons",
-            },
-        ],
+                dir: "./public/icons"
+            }
+        ]
     },
 
-    modules: [
-        [
-            "@nuxtjs/google-fonts",
-            {
-                families: {
-                    "DM Sans": "100..900",
-                    Inter: "100..900",
-                    download: true,
-                    inject: false,
-                },
-            },
-        ],
-        "@nuxt/icon",
-        "reka-ui/nuxt",
-    ],
-});
+    modules: [[
+        "@nuxtjs/google-fonts",
+        {
+            families: {
+                "DM Sans": "100..900",
+                Inter: "100..900",
+                download: true,
+                inject: false
+            }
+        }
+    ], "@nuxt/icon", "reka-ui/nuxt"]
+});
\ No newline at end of file