From ca32a6b8e92e59cfee84e3c8207146e04dd8379a Mon Sep 17 00:00:00 2001
From: mansi <mansi.d@canopas.com>
Date: Fri, 8 Sep 2023 18:21:15 +0530
Subject: [PATCH] fix: font loading problem

---
 assets/css/global.css         | 24 ++++++++++++------------
 components/partials/header.js |  1 +
 package.json                  |  1 +
 pages/_app.js                 | 34 ++++++++++++++++++++++++++++++++++
 pages/index.js                |  4 ++--
 yarn.lock                     |  5 +++++
 6 files changed, 55 insertions(+), 14 deletions(-)

diff --git a/assets/css/global.css b/assets/css/global.css
index 917a5ec3..76921e76 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 c4c0d3dc..83ccea09 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 ebe1c596..9089d0c8 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/_app.js b/pages/_app.js
index a86f4752..44f797d8 100644
--- a/pages/_app.js
+++ b/pages/_app.js
@@ -3,11 +3,44 @@ import dynamic from "next/dynamic";
 import mixpanel from "mixpanel-browser";
 import Script from "next/script";
 import { Suspense } from "react";
+import localFont from "@next/font/local";
 const Header = dynamic(() => import("../components/partials/header"));
 const Footer = dynamic(() => import("../components/partials/footer"), {
   ssr: false,
 });
 
+const myFonts = localFont({
+  src: [
+    {
+      path: "../assets/fonts/Inter-ExtraLight.woff2",
+    },
+    {
+      path: "../assets/fonts/Inter-Regular.woff2",
+    },
+    {
+      path: "../assets/fonts/Inter-Medium.woff2",
+    },
+    {
+      path: "../assets/fonts/Inter-SemiBold.woff2",
+    },
+    {
+      path: "../assets/fonts/Inter-Bold.woff2",
+    },
+    {
+      path: "../assets/fonts/Comme-Light.woff2",
+    },
+    {
+      path: "../assets/fonts/Comme-Regular.woff2",
+    },
+    {
+      path: "../assets/fonts/Comme-Medium.woff2",
+    },
+    {
+      path: "../assets/fonts/Comme-SemiBold.woff2",
+    },
+  ],
+});
+
 mixpanel.init(process.env.NEXT_PUBLIC_MIXPANEL_PROJECT_TOKEN, { debug: true });
 
 export default function App({ Component, pageProps }) {
@@ -16,6 +49,7 @@ export default function App({ Component, pageProps }) {
       <Script
         src={`https://www.google.com/recaptcha/enterprise.js?render=${process.env.NEXT_PUBLIC_RECAPTCHA_SITE_KEY}`}
       ></Script>
+      <main className={myFonts.className}></main>
       <Suspense fallback={<p>Loading</p>}>
         <Header mixpanel={mixpanel} />
         <Component {...pageProps} mixpanel={mixpanel} />
diff --git a/pages/index.js b/pages/index.js
index 106e17c7..e7a112af 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 10530aca..27c63ee5 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"