From d02ae06724bc111f8485079874cfaa2b60b760eb Mon Sep 17 00:00:00 2001
From: Austin Chen <akrolsmir@gmail.com>
Date: Thu, 2 Dec 2021 17:21:43 -0600
Subject: [PATCH] Use Major Mono for the header font

---
 web/components/hero.tsx | 8 ++++----
 web/pages/index.tsx     | 4 ++++
 web/tailwind.config.js  | 3 +++
 3 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/web/components/hero.tsx b/web/components/hero.tsx
index 534a5eb2..28b1db84 100644
--- a/web/components/hero.tsx
+++ b/web/components/hero.tsx
@@ -19,13 +19,13 @@ export const Hero = () => {
           >
             <div className="flex items-center flex-1">
               <div className="flex items-center justify-between w-full md:w-auto">
-                <a href="#">
-				<img className="h-8 w-auto sm:h-10 inline-block mr-2 mb-1" src="/logo-icon.svg" />
-                  <span className="text-white font-mono">Mantic Markets</span>
+                <a href="#" className="inline-grid grid-flow-col align-items-center h-6 sm:h-10">
+				          <img className="w-auto h-6 sm:h-10 inline-block mr-3" src="/logo-icon.svg" />
+                  <span className="text-white font-major-mono lowercase sm:text-2xl my-auto">Mantic Markets</span>
                 </a>
               </div>
 			  
-              <div className="space-x-8 md:flex md:ml-10">
+              <div className="space-x-8 md:flex md:ml-16">
                 {navigation.map((item) => (
                   <a key={item.name} href={item.href} className="text-base font-medium text-white hover:text-gray-300">
                     {item.name}
diff --git a/web/pages/index.tsx b/web/pages/index.tsx
index f901db31..256c370d 100644
--- a/web/pages/index.tsx
+++ b/web/pages/index.tsx
@@ -10,6 +10,10 @@ const Home: NextPage = () => {
         <title>Mantic Markets</title>
         <meta name="description" content="Create and bet" />
         <link rel="icon" href="/favicon.ico" />
+
+        <link rel="preconnect" href="https://fonts.googleapis.com" />
+        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+        <link href="https://fonts.googleapis.com/css2?family=Major+Mono+Display&display=swap" rel="stylesheet" />
       </Head>
 
       <LandingPage />
diff --git a/web/tailwind.config.js b/web/tailwind.config.js
index 679d1979..7a47643b 100644
--- a/web/tailwind.config.js
+++ b/web/tailwind.config.js
@@ -3,6 +3,9 @@ module.exports = {
   purge: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
   darkMode: false, // or 'media' or 'class'
   theme: {
+    fontFamily: {
+      'major-mono': ['Major Mono Display', 'monospace'],
+    },
     extend: {
       backgroundImage: {
         'world-trading': "url('/world-trading-background.jpg')",