diff --git a/public/fonts/jgs7.ttf b/public/fonts/jgs7.ttf
new file mode 100644
index 0000000..e065f96
Binary files /dev/null and b/public/fonts/jgs7.ttf differ
diff --git a/public/fonts/jgs7.woff b/public/fonts/jgs7.woff
new file mode 100644
index 0000000..c1dfee5
Binary files /dev/null and b/public/fonts/jgs7.woff differ
diff --git a/public/fonts/jgs7.woff2 b/public/fonts/jgs7.woff2
new file mode 100644
index 0000000..27265a7
Binary files /dev/null and b/public/fonts/jgs7.woff2 differ
diff --git a/public/jgs7.ttf b/public/jgs7.ttf
new file mode 100644
index 0000000..8923a37
Binary files /dev/null and b/public/jgs7.ttf differ
diff --git a/src/app/[locale]/page.tsx b/src/app/[locale]/page.tsx
index 7250c96..d50acd9 100644
--- a/src/app/[locale]/page.tsx
+++ b/src/app/[locale]/page.tsx
@@ -40,9 +40,9 @@ export default function Home() {
             </video>
           </div>
           <div className="relative z-10 container mx-auto px-4 h-full flex items-center justify-center">
-            <div className="text-center">
-              <h1 className="text-6xl md:text-8xl font-bold tracking-tighter mb-6 light:text-background">{t.hero.title}</h1>
-              <p className="text-xl md:text-2xl  text-primary">{t.hero.subtitle}</p>
+            <div className="text-center font-[JGS7]">
+              <h1 className="text-5xl sm:text-6xl md:text-8xl font-bold tracking-tighter mb-6 light:text-background">{t.hero.title}</h1>
+              <p className="text-3xl sm:text-4xl md:text-5xl lg:text-6xl xl-text:7xl 2xl:text-8xl text-primary">{t.hero.subtitle}</p>
             </div>
           </div>
         </section>
@@ -69,7 +69,7 @@ export default function Home() {
           <div className="container mx-auto px-4">
             <h2 className="text-4xl font-bold mb-8 tracking-tighter">{t.when.title}</h2>
             <div className="text-lg text-muted-foreground">
-              <p className="text-primary text-3xl">{t.when.date}</p>
+              <p className="text-primary text-3xl font-[JGS7]">{t.when.date}</p>
               <p className="mt-4">{t.when.extra}</p>
             </div>
           </div>
diff --git a/src/globals.css b/src/globals.css
index cb35435..4ed18a6 100644
--- a/src/globals.css
+++ b/src/globals.css
@@ -2,6 +2,15 @@
 @tailwind components;
 @tailwind utilities;
 
+@font-face {
+  font-family: "JGS7";
+  src: url("/fonts/jgs7.woff2") format("woff2"),
+    url("/fonts/jgs7.woff") format("woff"),
+    url("/fonts/jgs7.ttf") format("truetype");
+  font-weight: normal;
+  font-style: normal;
+}
+
 html {
   @media (prefers-reduced-motion: no-preference) {
     scroll-behavior: smooth;
@@ -72,9 +81,7 @@ html {
     --input: hsl(0 0% 14.9%);
     --ring: hsl(0 0% 83.1%);
   }
-}
 
-@layer base {
   * {
     @apply border-border;
   }
@@ -89,3 +96,7 @@ html {
 .parallax-video {
   transition: transform 0.25s ease-out;
 }
+
+.jgs7 {
+  font-family: "JGS7" !important;
+}