fix: change font in hero and marginals

config/content/Navigation.js

@@ -3,7 +3,7 @@
 export default {
   title: 'Navigation',
   logo: {
-    text: 'Innovision 2k23',
+    text: 'INNOVISION 2023',
   },
   navItems: [
     {

src/components/HeroSection/HeroContent.jsx

@@ -6,7 +6,7 @@ function HeroContent() {
   return (
     <HeroContainer>
       <HeroTitle>INNOVISION</HeroTitle>
-      <Year>2K23</Year>
+      <Year>2023</Year>
       <DatesDiv>
         <Line />
         <Dates>3rd-5th November 2023</Dates>

src/components/HeroSection/styles.js

@@ -28,15 +28,15 @@ export const HeroContainer = styled.div`
 export const HeroTitle = styled.h1`
   ${tw`
     mt-[89px]
-    text-[128px]
-    lg:text-[90px]
-    md:text-[80px]
+    text-[150px]
+    lg:text-[120px]
+    md:text-[90px]
     sm:text-[48px]
     leading-[110px]
     md:leading-[60px]
-    font-Roslindale
     text-color-primary
   `};
+  font-family: var(--font-family-stardos);
 `;
 
 export const Year = styled.h1`
@@ -48,9 +48,9 @@ export const Year = styled.h1`
     leading-[110px]
     md:leading-[64px]
     sm:leading-[36px]
-    font-Roslindale
     text-color-primary
   `};
+  font-family: var(--font-family-stardos);
 `;
 
 export const DatesDiv = styled.div`
@@ -82,13 +82,14 @@ export const Line = styled.div`
 export const Dates = styled.p`
   ${tw`
     inline-block
-    text-[24px]
-    xl:text-[20px]
-    md:text-[18px]
-    sm:text-[14px]
+    text-[32px]
+    xl:text-[26px]
+    md:text-[20px]
+    sm:text-[16px]
     leading-[64px]
     md:leading-[50px]
     font-Roslindale
     text-color-primary
-`}
+`};
+  font-family: var(--font-family-stardos);
 `;

src/components/marginals/Footer/styles.js

@@ -114,12 +114,9 @@ export const Logo = styled.img`
 `;
 
 export const TitleText = styled.p`
-  ${tw`
-    font-Roslindale
-  `}
-  color: #FFF;
+  font-family: var(--font-family-stardos);
+  color: #fff;
   font-size: 24px;
-  font-style: italic;
   font-weight: 400;
   line-height: normal;
   text-transform: uppercase;

src/components/marginals/Navbar/DesktopNav.jsx

@@ -2,9 +2,8 @@ import { Link } from 'gatsby';
 import React, { useContext } from 'react';
 import { AuthContext } from '../../../utils/Auth';
 import { nav } from '../../../../config/content';
-import Heading4 from '../../shared/Typography/Heading4';
 import { Container } from '../../shared';
-import { NavCenter, NavRight, NavSection, NavWrapper, StyledHamburger } from './styles';
+import { NavCenter, NavRight, NavSection, NavWrapper, StyledHamburger, TitleText } from './styles';
 import { MenuContext } from './MenuContext';
 import Button from '../../shared/Button';
 import NavList from './NavList';
@@ -21,7 +20,7 @@ function DesktopNav() {
         <NavWrapper>
           <div className='navLeft'>
             <Link to='/'>
-              <Heading4>{nav.logo.text}</Heading4>
+              <TitleText>{nav.logo.text}</TitleText>
             </Link>
           </div>
           <NavCenter>

src/components/marginals/Navbar/styles.jsx

@@ -178,3 +178,15 @@ export const StyledHamburger = styled.button`
     display: none;
   }
 `;
+
+export const TitleText = styled.h4`
+  ${tw`
+    text-3xl
+    2xl:text-3xl
+    lg:text-3xl
+    md:text-xl
+    sm:text-xl
+    text-color-primary
+  `};
+  font-family: var(--font-family-stardos);
+`;

src/styles/global.css

@@ -1,4 +1,5 @@
 @import url('https://fonts.googleapis.com/css2?family=Inter:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Stardos+Stencil:wght@400;700&display=swap');
 
 /* Tailwind imports */
 @tailwind base;
@@ -251,4 +252,6 @@ select {
   --max-width: 83.5em;
   --max-width-bleed: 90%;
   --max-width-narrow: 50em;
+
+  --font-family-stardos: 'Stardos Stencil', sans-serif;
 }