implement font mona-sans

src/components/Button/index.tsx

@@ -40,7 +40,6 @@ const StyledButton = styled.button<{
   border-radius: 3px;
   font-size: 14px;
   font-weight: 500;
-  font-family: "Catamaran", sans-serif;
   width: ${({ block }) => (block ? "100%" : "fit-content")};
   height: 40px;
   background-image: none;

src/components/Loading/index.tsx

@@ -32,7 +32,7 @@ const StyledLoading = styled.div`
 `;
 
 const StyledLogo = styled.h2`
-  font-weight: 600;
+  font-weight: 800;
   font-size: 56px;
   pointer-events: none;
   margin-bottom: 10px;

src/components/Tooltip/index.tsx

@@ -20,12 +20,13 @@ const StyledTooltip = styled.div<{ visible: boolean }>`
   background: ${({ theme }) => theme.BACKGROUND_PRIMARY};
   color: ${({ theme }) => theme.TEXT_NORMAL};
   border-radius: 5px;
-  padding: 4px 8px;
+  padding: 6px 8px;
   display: ${({ visible }) => (visible ? "initial" : "none")};
   white-space: nowrap;
+  font-family: 'Mona Sans';
   font-size: 16px;
   user-select: none;
-  font-weight: 500;
+  font-weight: 600;
   box-shadow: 0 1px 2px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.07),
     0 4px 8px rgba(0, 0, 0, 0.07), 0 8px 16px rgba(0, 0, 0, 0.07),
     0 16px 32px rgba(0, 0, 0, 0.07), 0 32px 64px rgba(0, 0, 0, 0.07);

src/constants/globalStyle.ts

@@ -1,12 +1,25 @@
 import { createGlobalStyle } from "styled-components";
 
 const GlobalStyle = createGlobalStyle`
+  @font-face {
+    font-family: 'Mona Sans';
+    src:
+      url('assets/Mona-Sans.woff2') format('woff2 supports variations'),
+      url('assets/Mona-Sans.woff2') format('woff2-variations');
+    font-weight: 200 900;
+    font-stretch: 75% 125%;
+  }
+
+  h1, h2, h3, h4, p {
+    font-family: 'Mona Sans';
+  }
+
   html, body {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
     color: ${({ theme }) => theme.FULL_WHITE};
-    font-family: 'Catamaran', sans-serif;
+    font-family: 'Mona Sans';
     font-weight: 400;
     font-size: 16px;
     scroll-behavior: smooth;
@@ -42,6 +55,7 @@ const GlobalStyle = createGlobalStyle`
   }
 
   button {
+    font-family: 'Mona Sans';
     border: none;
     outline: none;
     background: transparent;
@@ -49,6 +63,7 @@ const GlobalStyle = createGlobalStyle`
     margin: 0;
     padding: 0;
     cursor: pointer;
+    font-weight: 800;
   }
 
   #carbonads * {

src/containers/Editor/BottomBar.tsx

@@ -43,6 +43,7 @@ const StyledBottomBarItem = styled.button`
   height: 28px;
   padding: 4px;
   font-size: 12px;
+  font-weight: 400;
   color: ${({ theme }) => theme.INTERACTIVE_NORMAL};
 
   &:hover {

src/containers/Home/index.tsx

@@ -44,7 +44,7 @@ const HeroSection = () => {
   return (
     <Styles.StyledHeroSection id="main">
       <Styles.StyledTitle>
-        <Styles.StyledGradientText>JSON</Styles.StyledGradientText> Crack
+        <Styles.StyledGradientText>JSON</Styles.StyledGradientText> CRACK
       </Styles.StyledTitle>
       <Styles.StyledSubTitle>
         Seamlessly visualize your JSON data{" "}

src/containers/Home/styles.tsx

@@ -122,9 +122,9 @@ export const StyledNavLink = styled.a`
 `;
 
 export const StyledTitle = styled.h1`
-  font-size: 5rem;
   font-weight: 900;
   margin: 0;
+  font-size: min(10vw, 64px);
 
   @media only screen and (max-width: 768px) {
     font-size: 3rem;

src/containers/Modals/GoalsModal/index.tsx

@@ -11,7 +11,6 @@ const StyledTitle = styled.p`
   color: ${({ theme }) => theme.TEXT_POSITIVE};
   flex: 1;
   font-weight: 700;
-  font-family: "Catamaran", sans-serif;
   margin-top: 0;
 
   &::after {

src/containers/Modals/ImportModal/index.tsx

@@ -33,6 +33,7 @@ const StyledUploadWrapper = styled.label`
 `;
 
 const StyledFileName = styled.span`
+  padding-top: 14px;
   color: ${({ theme }) => theme.INTERACTIVE_NORMAL};
 `;
 

src/containers/Modals/LoginModal/index.tsx

@@ -13,7 +13,6 @@ const StyledTitle = styled.p`
   color: ${({ theme }) => theme.TEXT_POSITIVE};
   flex: 1;
   font-weight: 700;
-  font-family: "Catamaran", sans-serif;
   margin-top: 0;
 
   &::after {

src/pages/_document.tsx

@@ -21,10 +21,17 @@ class MyDocument extends Document {
             crossOrigin="anonymous"
           />
           <link
-            href="https://fonts.googleapis.com/css2?family=Catamaran:wght@400;500;700&family=Roboto+Mono:wght@500&family=Roboto:wght@400;500;700&display=swap"
+            href="https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@500&family=Roboto:wght@400;500;700&display=swap"
             rel="stylesheet"
             crossOrigin="anonymous"
           />
+          <link
+            rel="preload"
+            href="Mona-Sans.woff2"
+            as="font"
+            type="font/woff2"
+            crossOrigin="anonymous"
+          ></link>
         </Head>
         <body>
           <Main />