diff --git a/src/components/pages/Front.page.js b/src/components/pages/Front.page.js
index 90f2c76..6c84ab5 100644
--- a/src/components/pages/Front.page.js
+++ b/src/components/pages/Front.page.js
@@ -48,12 +48,12 @@ const FrontPage = () => {
         <div className="w-full h-3/5 flex justify-center items-center">
           <div className="flex flex-col gap-4 justify-center items-center">
             <AppearText
-              className="font-mono text-7xl text-frost-400"
+              className="font-display font-bold text-7xl text-frost-400"
               text="JOHN COSTA"
               delay={750}
             />
             <AppearText
-              className="font-mono text-5xl text-frost-200"
+              className="font-display font-bold text-5xl text-frost-200"
               text="DEVELOPER"
               delay={1500}
             />
diff --git a/tailwind.config.js b/tailwind.config.js
index 7d76919..943293a 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -27,7 +27,11 @@ module.exports = {
         purple: '#B48EAD',
       },
     },
-    extend: {},
+    extend: {
+      fontFamily: {
+        display: ['Open Sans'],
+      },
+    },
   },
   variants: {
     extend: {},