7 files changed, 5 insertions, 26 deletions
diff --git a/pages/index.js b/pages/index.js
index c3f30ae..b97bcbb 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -3,7 +3,7 @@ import Link from 'next/link'
 import Computer from '../components/computer'
 import Image from "next/image";
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faYoutube, faTwitter, faDiscord, faGithub, faReddit, faInstagram, faLinkedin } from '@fortawesome/free-brands-svg-icons'
+import { faYoutube, faTwitter, faDiscord, faGithub, faReddit, faInstagram, faLinkedin, faMastodon } from '@fortawesome/free-brands-svg-icons'
 const iconSize = "3x"
 const iconProperties = "hover:text-gray-700 transition-all ease-in-out"
 
@@ -27,6 +27,7 @@ export default function Home() {
                     <a href="https://discord.gg/EFhRDqG" target="_blank" rel="noopener noreferrer"><FontAwesomeIcon icon={faDiscord} size={iconSize} className={iconProperties} /></a>
                     <a href="https://www.youtube.com/c/AndrewLeeCAN" target="_blank" rel="noopener noreferrer"><FontAwesomeIcon icon={faYoutube} size={iconSize} className={iconProperties} /></a>
                     <a href="https://twitter.com/Alee14498" target="_blank" rel="noopener noreferrer"><FontAwesomeIcon icon={faTwitter} size={iconSize} className={iconProperties} /></a>
+                    <a href="https://social.linux.pizza/@Alee" target="_blank" rel="noopener noreferrer"><FontAwesomeIcon icon={faMastodon} size={iconSize} className={iconProperties} /></a>
                     <a href="https://instagram.com/alee14498" target="_blank" rel="noopener noreferrer"><FontAwesomeIcon icon={faInstagram} size={iconSize} className={iconProperties} /></a>
                     <a href="https://reddit.com/u/Alee1449" target="_blank" rel="noopener noreferrer"><FontAwesomeIcon icon={faReddit} size={iconSize} className={iconProperties} /></a>
                 </div>
diff --git a/public/ttf/Hack-Bold.ttf b/public/ttf/Hack-Bold.ttf
deleted file mode 100644
index 7ff4975..0000000
--- a/public/ttf/Hack-Bold.ttf
+++ /dev/null
diff --git a/public/ttf/Hack-BoldItalic.ttf b/public/ttf/Hack-BoldItalic.ttf
deleted file mode 100644
index 3b137d9..0000000
--- a/public/ttf/Hack-BoldItalic.ttf
+++ /dev/null
diff --git a/public/ttf/Hack-Italic.ttf b/public/ttf/Hack-Italic.ttf
deleted file mode 100644
index d26198a..0000000
--- a/public/ttf/Hack-Italic.ttf
+++ /dev/null
diff --git a/public/ttf/Hack-Regular.ttf b/public/ttf/Hack-Regular.ttf
deleted file mode 100644
index 92a90cb..0000000
--- a/public/ttf/Hack-Regular.ttf
+++ /dev/null
diff --git a/styles/globals.css b/styles/globals.css
index 136921d..13a193b 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -1,31 +1,9 @@
+@import url('https://cdn.jsdelivr.net/npm/hack-font@3/build/web/hack.css');
+
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
 
-@layer base {
-    @font-face {
-        font-family: "Hack", monospace;
-        src: url("../public/ttf/Hack-Regular.ttf");
-    }
-
-    @font-face {
-        font-family: "Hack", monospace;
-        src: url("../public/ttf/Hack-Italic.ttf");
-        font-style: italic;
-    }
-    @font-face {
-        font-family: "Hack", monospace;
-        src: url("../public/ttf/Hack-Bold.ttf");
-        font-weight: 700;
-    }
-    @font-face {
-        font-family: "Hack", monospace;
-        src: url("../public/ttf/Hack-BoldItalic.ttf");
-        font-weight: 700;
-    }
-
-}
-
 @layer components {
     .link {
         @apply text-blue-500 hover:text-blue-300 active:text-blue-100
diff --git a/tailwind.config.js b/tailwind.config.js
index 3504952..26cfc0d 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -7,7 +7,7 @@ module.exports = {
   ],
   theme: {
     fontFamily: {
-      'hack': ['Hack', 'sans-serif']
+      'hack': ['Hack', 'monospace']
     },
     extend: {
       colors: {