styles: font common

src/components/common/Header/Header.module.scss

@@ -1,22 +1,22 @@
-@import '../../../styles/utilities';
+@import "../../../styles/utilities";
 
 .header {
   .btn {
     // @apply font-bold py-2 px-4 rounded;
-
   }
   .btnBlue {
     @apply bg-primary hover:bg-warning text-label font-bold py-2 px-4 custom-border-radius;
-    
   }
   .link {
     color: theme("colors.warning");
   }
   .heading {
-    @apply text-base;
+    @apply text-base font-heading;
   }
-
   .paragraph {
     @apply topline;
   }
+  .logo {
+    @apply font-logo;
+  }
 }

src/components/common/Header/Header.tsx

@@ -10,6 +10,8 @@ const Header: FC<Props> = ({ }: Props) => {
     return (
         <div className={s.header}>
             This is Header
+            <h1 className={s.heading}>This is heading</h1>
+            <div className={s.logo}>This is logo text</div>
         </div>
     )
 }

src/styles/_base.scss

@@ -1,5 +1,7 @@
+@import url("https://fonts.googleapis.com/css2?family=Nunito&family=Poppins:wght@500&family=Righteous&display=swap");
+
 :root {
-  --primary: #5B9A74;
+  --primary: #5b9a74;
   --primary-light: #e0f6e8;
   --primary-lightest: #effaf4;
 
@@ -27,7 +29,7 @@
   --text-base: #3d3d3d;
   --text-label: #8f8f8f;
   --text-placeholder: #cccccc;
-  
+
   --disabled: #cccccc;
   --border-line: #ebebeb;
   --background: #f8f8f8;
@@ -36,7 +38,10 @@
   --font-size: 16px;
   --line-height: 24px;
 
-  --font-sans: -apple-system, system-ui, BlinkMacSystemFont, "Helvetica Neue", "Helvetica", sans-serif;
+  --font-sans: "Nunito", cursive, -apple-system, system-ui, BlinkMacSystemFont, "Helvetica Neue", "Helvetica",
+    sans-serif;
+  --font-heading: "Righteous", -apple-system, system-ui, BlinkMacSystemFont, "Helvetica Neue", "Helvetica", sans-serif;
+  --font-logo: "Poppins", -apple-system, system-ui, BlinkMacSystemFont, "Helvetica Neue", "Helvetica", sans-serif;
 }
 
 *,

src/styles/_utilities.scss

@@ -91,4 +91,12 @@
     .custom-border-radius {
         border-radius: 60% 10% 60% 2%/ 10% 40% 10% 50%;
     }
+
+    .font-heading {
+        font-family: var(--font-heading);
+    }
+
+    .font-logo {
+        font-family: var(--font-logo);
+    }
 }