diff --git a/public/styles/custom.css b/public/styles/custom.css
index a34a0b45c..02930c98c 100644
--- a/public/styles/custom.css
+++ b/public/styles/custom.css
@@ -1,6 +1,6 @@
 html {
   scroll-behavior: smooth;
-  font-family: Mulish, Arial, Helvetica;
+  font-family: Mulish, Arial, Helvetica,sans-serif;
 }
 
 h1 span {
@@ -28,7 +28,7 @@ h2 span {
   flex-shrink: 0;
   width: 40px;
   height: 40px;
-  font-family: 'Mulish', Arial, Helvetica;
+  font-family: 'Mulish', Arial, Helvetica,sans-serif;
   font-size: 1.25rem;
   line-height: 1;
   border-radius: 4px;
diff --git a/src/components/globals/constants.js b/src/components/globals/constants.js
index 1a7426851..832bd4edc 100644
--- a/src/components/globals/constants.js
+++ b/src/components/globals/constants.js
@@ -11779,3 +11779,5 @@ export const navigationCustom = [
     children: [],
   },
 ];
+
+export const FONT_FAMILY = `Mulish, Arial, sans-serif`;
diff --git a/src/revamp/ui/HeroV2/index.js b/src/revamp/ui/HeroV2/index.js
index bcf265281..fa8a10fc2 100644
--- a/src/revamp/ui/HeroV2/index.js
+++ b/src/revamp/ui/HeroV2/index.js
@@ -3,6 +3,7 @@ import useMediaQuery from '@mui/material/useMediaQuery';
 import { useTheme } from '@mui/material/styles';
 import { generateAlt } from 'utils';
 import { useEffect, useState } from 'react';
+import { FONT_FAMILY } from 'components/globals/constants';
 
 const media =
     'https://kfg6bckb.media.zestyio.com/Zesty-io-2023-Homepage-hero.webp',
@@ -136,7 +137,7 @@ const Hero = ({
                   style={{
                     opacity: index === currentTextIndex ? 1 : 0.5, // Set opacity based on the current index
                     transition: 'opacity 0.5s ease-in-out', // Add a smooth transition
-                    fontFamily: `Mulish, Arial, sans-serif`,
+                    fontFamily: FONT_FAMILY,
                   }}
                 >
                   {text}
@@ -150,7 +151,7 @@ const Hero = ({
                 fontSize={{ xs: 24, tablet: '62px' }}
                 lineHeight={{ xs: '18px', tablet: '56px' }}
                 style={{
-                  fontFamily: `Mulish, Arial, sans-serif`,
+                  fontFamily: FONT_FAMILY,
                 }}
                 mb={{ xs: 2, tablet: '20px', lg: '4px', desktopWide: '12px' }}
               >
@@ -172,6 +173,7 @@ const Hero = ({
                 color="primary"
                 size={isLg ? 'extraLarge' : 'large'}
                 title={primaryBtn}
+                style={{ fontFamily: FONT_FAMILY }}
               >
                 {primaryBtn}
               </Button>
@@ -181,6 +183,7 @@ const Hero = ({
                 color="primary"
                 size={isLg ? 'extraLarge' : 'large'}
                 title={secondaryBtn}
+                style={{ fontFamily: FONT_FAMILY }}
               >
                 {secondaryBtn}
               </Button>
@@ -189,6 +192,7 @@ const Hero = ({
             <Typography
               mb={3}
               sx={(theme) => ({
+                fontFamily: FONT_FAMILY,
                 [theme.breakpoints.down('lg')]: {
                   letterSpacing: '1px',
                   fontSize: '12px',