fix: font loading problem

canopas · Sep 8, 2023 · ca32a6b · ca32a6b
1 parent 0628cbb
commit ca32a6b
Show file tree

Hide file tree

Showing 6 changed files with 55 additions and 14 deletions.
diff --git a/assets/css/global.css b/assets/css/global.css
@@ -7,95 +7,95 @@
   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 {
   font-family: "Inter Regular";
   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 {
   font-family: "Inter Medium";
   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 {
   font-family: "Inter SemiBold";
   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 {
   font-family: "Inter Bold";
   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 {
   font-family: "Source CodePro";
   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 {
   font-family: "Poppins Regular";
   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 {
   font-family: "Poppins Medium";
   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 {
   font-family: "Comme Light";
   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 {
   font-family: "Comme Regular";
   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 {
   font-family: "Comme Medium";
   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 {
   font-family: "Comme SemiBold";
   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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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/[email protected]":
   version "13.4.12"
   resolved "https://registry.yarnpkg.com/@next/swc-darwin-arm64/-/swc-darwin-arm64-13.4.12.tgz#326c830b111de8a1a51ac0cbc3bcb157c4c4f92c"