Add Splatoon fonts

src/assets/base.css

@@ -8,3 +8,23 @@ body {
   background-image: url('@/assets/information-bg.jpg');
   background-size: 50%;
 }
+
+@font-face {
+  font-family: Splatoon1;
+  src: url("@/assets/fonts/5476b40d543260503fbccbbab305b1f9.woff2") format("woff2"),url("@/assets/fonts/f85b6b75e658c1758ee0b3f2262c9522.woff") format("woff")
+}
+
+@font-face {
+  font-family: Splatoon1;
+  src: url("@/assets/fonts/0e12b13c359d4803021dc4e17cecc311.woff2") format("woff2"),url("@/assets/fonts/f25982b8ab52a929938cd63f15656ecf.woff") format("woff")
+}
+
+@font-face {
+  font-family: Splatoon2;
+  src: url("@/assets/fonts/61f6c62eb1065d00c9a2bcf85e090fe4.woff2") format("woff2"),url("@/assets/fonts/b426a8e06ebdfcb82b481ab57922d6b4.woff") format("woff")
+}
+
+@font-face {
+  font-family: Splatoon2;
+  src: url("@/assets/fonts/eb82d017016045bf998cade4dac1ec22.woff2") format("woff2"),url("@/assets/fonts/b4fab2f6ac35a758f6aeb5b7054ab121.woff") format("woff")
+}

src/components/Splatoon3Countdown.vue

@@ -1,16 +1,17 @@
 <template>
   <div>
 <div>
-  <div class="mt-6" aria-hidden="true">
-    <div class="text-center">
-      releases in 123 days!
+  <div class="mt-6 font-splatoon2" aria-hidden="true">
+    <div class="font-splatoon2 text-center space-y-2">
+      <div class="text-gray-300">releases in</div>
+      <div class="text-gray-100 text-2xl">123 days!</div>
     </div>
     <div class="bg-blue-pattern rounded-full overflow-hidden my-4">
       <div class="h-10 bg-yellow-pattern rounded-full" style="width: 75%"></div>
     </div>
-    <div class="grid grid-cols-2 text-sm font-medium">
-      <div class="text-splatoon-yellow">Announced</div>
-      <div class="text-splatoon-blue text-right">Released</div>
+    <div class="flex justify-between text-sm font-medium">
+      <div class="text-splatoon-yellow -rotate-3">Announced</div>
+      <div class="text-splatoon-blue text-right rotate-3">Released</div>
     </div>
   </div>
 </div>

src/views/HomeView.vue

@@ -2,7 +2,7 @@
   <main class="min-h-screen flex flex-col">
     <div class="grow flex items-center justify-center">
       <div class="w-full max-w-2xl m-4">
-        <div class="text-4xl text-center">Splatoon 3</div>
+        <div class="font-splatoon1 text-5xl text-center">Splatoon 3</div>
 
         <Splatoon3Countdown />
       </div>

tailwind.config.js

@@ -9,8 +9,12 @@ module.exports = {
         splatoon: {
           yellow: '#eefe65',
           blue: '#5b3df5',
-        }
-      }
+        },
+      },
+      fontFamily: {
+        splatoon1: ['Splatoon1', 'sans-serif'],
+        splatoon2: ['Splatoon2', 'sans-serif'],
+      },
     },
   },
   plugins: [],