diff --git a/assets/css/global.css b/assets/css/global.css
index 917a5ec..76921e7 100644
--- a/assets/css/global.css
+++ b/assets/css/global.css
@@ -7,7 +7,7 @@
   font-style: normal;
   font-weight: 200;
   font-display: swap;
-  src: url(./../fonts/Inter-ExtraLight.woff2);
+  src: url(./../fonts/Inter-ExtraLight.woff2) format("woff2");
 }
 
 @font-face {
@@ -15,7 +15,7 @@
   font-style: normal;
   font-weight: 400;
   font-display: swap;
-  src: url(./../fonts/Inter-Regular.woff2);
+  src: url(./../fonts/Inter-Regular.woff2) format("woff2");
 }
 
 @font-face {
@@ -23,7 +23,7 @@
   font-style: normal;
   font-weight: 500;
   font-display: swap;
-  src: url(./../fonts/Inter-Medium.woff2);
+  src: url(./../fonts/Inter-Medium.woff2) format("woff2");
 }
 
 @font-face {
@@ -31,7 +31,7 @@
   font-style: normal;
   font-weight: 600;
   font-display: swap;
-  src: url(./../fonts/Inter-SemiBold.woff2);
+  src: url(./../fonts/Inter-SemiBold.woff2) format("woff2");
 }
 
 @font-face {
@@ -39,7 +39,7 @@
   font-style: normal;
   font-weight: 700;
   font-display: swap;
-  src: url(./../fonts/Inter-Bold.woff2);
+  src: url(./../fonts/Inter-Bold.woff2) format("woff2");
 }
 
 @font-face {
@@ -47,7 +47,7 @@
   font-style: normal;
   font-weight: 400;
   font-display: swap;
-  src: url(./../fonts/Source-codePro.woff2);
+  src: url(./../fonts/Source-codePro.woff2) format("woff2");
 }
 
 @font-face {
@@ -55,7 +55,7 @@
   font-style: normal;
   font-weight: 400;
   font-display: swap;
-  src: url(./../fonts/Poppins-Regular.woff2);
+  src: url(./../fonts/Poppins-Regular.woff2) format("woff2");
 }
 
 @font-face {
@@ -63,7 +63,7 @@
   font-style: normal;
   font-weight: 500;
   font-display: swap;
-  src: url(./../fonts/Poppins-Medium.woff2);
+  src: url(./../fonts/Poppins-Medium.woff2) format("woff2");
 }
 
 @font-face {
@@ -71,7 +71,7 @@
   font-style: normal;
   font-weight: 300;
   font-display: swap;
-  src: url(./../fonts/Comme-Light.woff2);
+  src: url(./../fonts/Comme-Light.woff2) format("woff2");
 }
 
 @font-face {
@@ -79,7 +79,7 @@
   font-style: normal;
   font-weight: 400;
   font-display: swap;
-  src: url(./../fonts/Comme-Regular.woff2);
+  src: url(./../fonts/Comme-Regular.woff2) format("woff2");
 }
 
 @font-face {
@@ -87,7 +87,7 @@
   font-style: normal;
   font-weight: 500;
   font-display: swap;
-  src: url(./../fonts/Comme-Medium.woff2);
+  src: url(./../fonts/Comme-Medium.woff2) format("woff2");
 }
 
 @font-face {
@@ -95,7 +95,7 @@
   font-style: normal;
   font-weight: 600;
   font-display: swap;
-  src: url(./../fonts/Comme-SemiBold.woff2);
+  src: url(./../fonts/Comme-SemiBold.woff2) format("woff2");
 }
 
 input:-webkit-autofill,
diff --git a/components/partials/header.js b/components/partials/header.js
index c4c0d3d..83ccea0 100644
--- a/components/partials/header.js
+++ b/components/partials/header.js
@@ -68,6 +68,7 @@ export default function Header({ mixpanel }) {
                   src={Logo}
                   className="mt-1 w-[205px] h-[38.5px]"
                   alt="canopas-logo"
+                  loading="eager"
                 />
               </Link>
             </div>
diff --git a/package.json b/package.json
index ebe1c59..9089d0c 100644
--- a/package.json
+++ b/package.json
@@ -11,6 +11,7 @@
   "dependencies": {
     "@google-cloud/recaptcha-enterprise": "^3.4.1",
     "@headlessui/react": "^1.7.4",
+    "@next/font": "^13.4.19",
     "@tailwindcss/line-clamp": "^0.4.2",
     "axios": "^1.2.2",
     "highlight.js": "^11.7.0",
diff --git a/pages/_document.js b/pages/_document.js
index fcb2249..32479b3 100644
--- a/pages/_document.js
+++ b/pages/_document.js
@@ -10,6 +10,76 @@ class MyDocument extends Document {
             content="width=device-width, initial-scale=1.0"
           />
           <link rel="icon" href="/resources/favicon.ico" />
+          <link
+            rel="preload"
+            href="../assets/fonts/Inter-ExtraLight.woff2"
+            as="font"
+            type="font/woff2"
+            crossorigin="anonymous"
+          />
+          <link
+            rel="preload"
+            href="../assets/fonts/Inter-Regular.woff2"
+            as="font"
+            type="font/woff2"
+            crossorigin="anonymous"
+          />
+          <link
+            rel="preload"
+            href="../assets/fonts/Inter-Medium.woff2"
+            as="font"
+            type="font/woff2"
+            crossorigin="anonymous"
+          />
+          <link
+            rel="preload"
+            href="../assets/fonts/Inter-SemiBold.woff2"
+            as="font"
+            type="font/woff2"
+            crossorigin="anonymous"
+          />
+          <link
+            rel="preload"
+            href="../assets/fonts/Inter-Bold.woff2"
+            as="font"
+            type="font/woff2"
+            crossorigin="anonymous"
+          />
+          <link
+            rel="preload"
+            href="../assets/fonts/Comme-Light.woff2"
+            as="font"
+            type="font/woff2"
+            crossorigin="anonymous"
+          />
+          <link
+            rel="preload"
+            href="../assets/fonts/Comme-Regular.woff2"
+            as="font"
+            type="font/woff2"
+            crossorigin="anonymous"
+          />
+          <link
+            rel="preload"
+            href="../assets/fonts/Comme-Medium.woff2"
+            as="font"
+            type="font/woff2"
+            crossorigin="anonymous"
+          />
+          <link
+            rel="preload"
+            href="../assets/fonts/Comme-SemiBold.woff2"
+            as="font"
+            type="font/woff2"
+            crossorigin="anonymous"
+          />
+          <link
+            rel="preload"
+            href="../assets/fonts/Comme-Bold.woff2"
+            as="font"
+            type="font/woff2"
+            crossorigin="anonymous"
+          />
         </Head>
         <body>
           <NextScript />
diff --git a/pages/index.js b/pages/index.js
index 106e17c..e7a112a 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -240,9 +240,9 @@ export default function Home({ posts, status, categories, mixpanel }) {
                       return (
                         <div key={featurePost.slug} className="space-y-2">
                           <div
-                            className={`w-auto h-auto border border-1 border-gray-300 transition-all aspect-auto hover:scale-105 ${
+                            className={`w-auto h-auto border border-1 border-gray-300 transition-all aspect-auto hover:scale-105 md:h-[7.742rem] lg:h-[10.085rem] xl:h-[12.195rem] 2xl:h-[14.304em] ${
                               featurePost.image.data == null
-                                ? "md:h-[7.742rem] lg:h-[10.085rem] xl:h-[12.195rem] 2xl:h-[14.304em] bg-black-900"
+                                ? "bg-black-900"
                                 : ""
                             } `}
                           >
diff --git a/yarn.lock b/yarn.lock
index 10530ac..27c63ee 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -230,6 +230,11 @@
   dependencies:
     glob "7.1.7"
 
+"@next/font@^13.4.19":
+  version "13.4.19"
+  resolved "https://registry.yarnpkg.com/@next/font/-/font-13.4.19.tgz#2b69aee760a3bbabf54873f80ae6d4b09b35d133"
+  integrity sha512-yOuSRYfqksWcaG/sATr1/DEGvvI8gnmAAnQCCZ0+L9p4Pio3/DMu71J56YHh9Hz84LDN4tMVzuux0ssCuM50sA==
+
 "@next/swc-darwin-arm64@13.4.12":
   version "13.4.12"
   resolved "https://registry.yarnpkg.com/@next/swc-darwin-arm64/-/swc-darwin-arm64-13.4.12.tgz#326c830b111de8a1a51ac0cbc3bcb157c4c4f92c"