Add custom font files and update tailwind configuration

Author: Meschacirung

assets/css/tailwind.css

@@ -2,72 +2,56 @@
 @tailwind components;
 @tailwind utilities;
 
-body {
-    font-family: "Work Sans", sans-serif;
+@font-face {
+    font-family: 'Geist';
+    src: url('/fonts/Geist-Bold.otf') format('opentype');
+    font-weight: bold;
+    font-style: normal;
+    font-display: swap;
 }
 
-.swiper-pagination-bullet{
-    @apply !bg-gray-200 dark:!bg-gray-700 !opacity-100;
+@font-face {
+    font-family: 'Geist';
+    src: url('/fonts/Geist-SemiBold.otf') format('opentype');
+    font-weight: 600;
+    font-style: normal;
+    font-display: swap;
 }
 
-.swiper-pagination-bullet-active{
-    @apply !bg-gray-950 dark:!bg-white;
+@font-face {
+    font-family: 'Geist';
+    src: url('/fonts/Geist-Medium.otf') format('opentype');
+    font-weight: 500;
+    font-style: normal;
+    font-display: swap;
 }
 
-@keyframes loop {
-    to {
-        offset-distance: 100%;
-    }
+@font-face {
+    font-family: 'Geist';
+    src: url('/fonts/Geist-Regular.otf') format('opentype');
+    font-weight: normal;
+    font-style: normal;
+    font-display: swap;
 }
 
-@layer utilities {
-    .animate-slide {
-        animation: slide 3s infinite;
-    }
-    .animate-slide-2 {
-        animation: slide2 3s infinite;
-    }
-}
-@layer components {
-    .navbar-active .hamburger div:first-child {
-        @apply translate-y-1.5 rotate-45;
-    }
-    .navbar-active .hamburger div:last-child {
-        @apply -translate-y-1 -rotate-45;
-    }
-    .navbar-active div:first-child div:first-child div:last-child {
-        @apply block lg:flex;
-    }
+@font-face {
+    font-family: 'GeistMono';
+    src: url('/fonts/GeistMono-Regular.otf') format('opentype');
+    font-weight: normal;
+    font-style: normal;
+    font-display: swap;
 }
-.isToggled #line1 {
-    @apply translate-y-1.5 rotate-45;
-}
-.isToggled #line2 {
-    @apply -translate-y-1 -rotate-45;
+
+.swiper-pagination-bullet{
+    @apply !bg-gray-200 dark:!bg-gray-700 !opacity-100;
 }
 
-@keyframes slide {
-    0% {
-        transform: translateX(-20rem);
-    }
-    25% {
-        transform: translateX(-10rem);
-    }
-    100% {
-        transform: translateX(15rem);
-    }
+.swiper-pagination-bullet-active{
+    @apply !bg-gray-950 dark:!bg-white;
 }
 
-@keyframes slide2 {
-    0% {
-        transform: translateX(-20%);
-    }
-    75% {
-        transform: translateX(20vw);
-        opacity: 1;
-    }
-    100% {
-        transform: translateX(60vw);
-        opacity: 0;
+@keyframes loop {
+    to {
+        offset-distance: 100%;
     }
 }

public/fonts/Geist-Bold.otf

@@ -1,5 +1,6 @@
 /** @type {import('tailwindcss').Config} */
 import themer from "@tailus/themer";
+const defaultTheme = require("tailwindcss/defaultTheme");
 
 module.exports = {
     content: ["./*.html", "./*.js"],
@@ -18,14 +19,19 @@ module.exports = {
             white: colors.white,
             black: colors.black,
             transparent: colors.transparent,
-        }),
+      }),
+      fontFamily: {
+        sans: ['Geist', 'Inter', ...defaultTheme.fontFamily.sans],
+        mono : ['GeistMono', 'fira-code', ...defaultTheme.fontFamily.mono],
+      },
         keyframes: {
             loop: {
                 to: {
                     "offset-distance": "100%",
                 },
             },
-        }
+        },
+        
     },
     plugins: [
         themer({