style(tamectosphere.dev): add font for Hero Title

tamectosphere · Feb 9, 2024 · d972a29 · d972a29
1 parent bb4bd68
commit d972a29
Show file tree

Hide file tree

Showing 5 changed files with 15 additions and 1 deletion.
diff --git a/app/components/modules/home/HeroBanner.tsx b/app/components/modules/home/HeroBanner.tsx
@@ -60,7 +60,7 @@ export function HeroBanner() {
       {renderWelcome && (
         <>
           <animated.div style={props3} className="text-center pb-4">
-            <h1 className="z-40 scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl xl:text-5xl 2xl:text-8xl">
+            <h1 className="z-40 font-audiowide scroll-m-20 text-4xl font-extrabold tracking-tight md:text-6xl lg:text-6xl xl:text-7xl 2xl:text-8xl">
               <span className="text-ecto-2">TAM</span>
               <span className="text-ecto-1">ECTOSPHERE</span>
             </h1>

diff --git a/app/styles/tailwind.css b/app/styles/tailwind.css
@@ -91,6 +91,18 @@
   src: url("/fonts/space-grotesk.ttf") format("truetype");
 }
 
+@font-face {
+  font-family: "Archivo Black";
+  font-weight: 400;
+  src: url("/fonts/archivo-black.ttf") format("truetype");
+}
+
+@font-face {
+  font-family: "Audiowide";
+  font-weight: 400;
+  src: url("/fonts/audiowide.ttf") format("truetype");
+}
+
 .blink-affect {
   animation: blinker 1s linear infinite;
 }

diff --git a/public/fonts/archivo-black.ttf b/public/fonts/archivo-black.ttf
diff --git a/public/fonts/audiowide.ttf b/public/fonts/audiowide.ttf
diff --git a/tailwind.config.ts b/tailwind.config.ts
@@ -19,6 +19,8 @@ export default {
     extend: {
       fontFamily: {
         ectopic: ['"Space Grotesk"', 'sans-serif'],
+        ectopicTitle: ['"Archivo Black"', 'sans-serif'],
+        audiowide: ['"Audiowide"', 'sans-serif'],
       },
       colors: {
         'ecto-1': '#E5C4AB',