Fix: font loading issue

nuxt-frontend/components/home-new/LandingSection.vue

@@ -28,7 +28,7 @@
         class="flex-[55%] flex flex-col items-center lg:items-start mt-6 lg:mt-[6.25rem]"
       >
         <h1
-          class="text-center lg:text-left w-full md:w-[95%] lg:w-[90%] xl:w-[94%] 2xl:w-[81%] mobile-header-1 lg:desk-header-2 xl:desk-header-1"
+          class="open-sans-font font-bold text-center lg:text-left w-full md:w-[95%] lg:w-[90%] xl:w-[94%] 2xl:w-[81%] mobile-header-1 lg:desk-header-2 xl:desk-header-1"
         >
           For over a decade we have helped businesses grow exponentially. <br />
           -
@@ -48,7 +48,7 @@
         </div>
 
         <div
-          class="flex items-center flex-col-reverse lg:flex-row xl:pt-[1.5rem]"
+          class="inter-font flex items-center flex-col-reverse lg:flex-row xl:pt-[1.5rem]"
         >
           <div class="text-center">
             <nuxt-link
@@ -136,6 +136,7 @@ import client2 from "@/assets/images/landing/client2-100w.webp";
 import client3 from "@/assets/images/landing/client3-100w.webp";
 import client4 from "@/assets/images/landing/client4-100w.webp";
 import AspectRatio from "../utils/AspectRatio.vue";
+
 export default {
   data() {
     return {
@@ -175,3 +176,15 @@ export default {
   inject: ["mixpanel"],
 };
 </script>
+
+<style scoped>
+.open-sans-font {
+  font-family:
+    Open Sans,
+    sans-serif;
+}
+
+.inter-font {
+  font-family: Inter, sans-serif;
+}
+</style>

nuxt-frontend/components/partials/NewHeader.vue

@@ -1,5 +1,5 @@
 <template>
-  <header class="relative z-[100] font-inter-medium">
+  <header class="relative z-[100] inter-font font-inter-medium">
     <div class="sticky top-0" :style="{ height: navContainerHeight + 'px' }">
       <nav
         class="ease w-full bg-white py-5 tracking-[0] text-black-core/[.87] transition-all duration-500 md:px-0 md:py-4"
@@ -95,7 +95,7 @@
                 >
                   <li v-for="navbar in navbar.subMenus" :key="navbar">
                     <nuxt-link
-                      class="sub-menu relative py-4 font-inter-medium text-[1rem] leading-[1.125rem] text-black-core/[0.6] md:text-[1.09375rem] md:leading-[1.28125rem] lg:text-[1.188rem] lg:leading-[1.437rem] after:absolute after:bottom-0 after:left-0 after:top-[42px] after:h-[3px] after:w-full after:origin-bottom-left after:scale-x-0 after:from-[#f2709c] after:to-[#ff9472] after:duration-300 after:bg-gradient-[90deg] hover:from-[#ff9472] hover:to-[#f2709c] hover:bg-clip-text hover:text-transparent hover:bg-gradient-[270.11deg] hover:after:origin-bottom-left hover:after:scale-x-100"
+                      class="sub-menu relative py-4 inter-font font-inter-medium text-[1rem] leading-[1.125rem] text-black-core/[0.6] md:text-[1.09375rem] md:leading-[1.28125rem] lg:text-[1.188rem] lg:leading-[1.437rem] after:absolute after:bottom-0 after:left-0 after:top-[42px] after:h-[3px] after:w-full after:origin-bottom-left after:scale-x-0 after:from-[#f2709c] after:to-[#ff9472] after:duration-300 after:bg-gradient-[90deg] hover:from-[#ff9472] hover:to-[#f2709c] hover:bg-clip-text hover:text-transparent hover:bg-gradient-[270.11deg] hover:after:origin-bottom-left hover:after:scale-x-100"
                       :href="navbar.url"
                       target="_self"
                       >{{ navbar.name }}
@@ -211,7 +211,7 @@
             >
               <li v-for="navbar in navbar.subMenus" :key="navbar">
                 <nuxt-link
-                  class="sub-menu relative py-2 font-inter-medium text-[1rem] leading-[1.125rem] text-black-core/[0.6] group-hover:z-[1] group-hover:text-white md:text-[1.09375rem] md:leading-[1.28125rem] lg:text-[1.188rem] lg:leading-[1.437rem] after:absolute after:bottom-0 after:left-0 after:top-[30px] md:after:top-[35px] after:h-[3px] after:w-full after:origin-bottom-left after:scale-x-0 after:from-[#f2709c] after:to-[#ff9472] after:duration-300 after:bg-gradient-[90deg] hover:from-[#ff9472] hover:to-[#f2709c] hover:bg-clip-text hover:text-transparent hover:bg-gradient-[270.11deg] hover:after:origin-bottom-left hover:after:scale-x-100"
+                  class="sub-menu relative py-2 inter-font font-inter-medium text-[1rem] leading-[1.125rem] text-black-core/[0.6] group-hover:z-[1] group-hover:text-white md:text-[1.09375rem] md:leading-[1.28125rem] lg:text-[1.188rem] lg:leading-[1.437rem] after:absolute after:bottom-0 after:left-0 after:top-[30px] md:after:top-[35px] after:h-[3px] after:w-full after:origin-bottom-left after:scale-x-0 after:from-[#f2709c] after:to-[#ff9472] after:duration-300 after:bg-gradient-[90deg] hover:from-[#ff9472] hover:to-[#f2709c] hover:bg-clip-text hover:text-transparent hover:bg-gradient-[270.11deg] hover:after:origin-bottom-left hover:after:scale-x-100"
                   :href="navbar.url"
                   target="_self"
                   >{{ navbar.name }}
@@ -362,7 +362,11 @@ export default {
 };
 </script>
 
-<style lang="postcss" scoped>
+<style scoped>
+.inter-font {
+  font-family: Inter, sans-serif;
+}
+
 .main-menu.router-link-exact-active {
   @apply from-[#ff9472] to-[#f2709c] bg-clip-text text-transparent bg-gradient-[270.11deg];
 }

nuxt-frontend/nuxt.config.js

@@ -20,6 +20,7 @@ export default defineNuxtConfig({
     "@canopassoftware/nuxt-blog-kit",
     "nuxt-lazy-hydrate",
     "@nuxtjs/sitemap",
+    "@nuxt/fonts",
     ["@nuxtjs/robots", robots],
   ],
   site: {

nuxt-frontend/package.json

@@ -43,6 +43,7 @@
   },
   "dependencies": {
     "@aws-sdk/client-s3": "^3.388.0",
+    "@nuxt/fonts": "^0.8.0",
     "@nuxtjs/robots": "^3.0.0",
     "@nuxtjs/tailwindcss": "^6.8.0",
     "@pinia/nuxt": "^0.4.11",