Enhance/font files

src/components/Home/Banner/index.module.scss

@@ -3,26 +3,22 @@
   height: 200px;
   margin: auto;
   width: 73%;
-  @media (max-width: 1920px)  {
+  @media (max-width: 1920px) {
     width: 72%;
-
   }
-  @media (max-width: 1680px)  {
+  @media (max-width: 1680px) {
     width: 70%;
-
   }
-  @media (max-width: 1440px)  {
-  width: 80%;
-
+  @media (max-width: 1440px) {
+    width: 80%;
   }
-  
+
   @media (max-width: 1024px) {
-
   }
-  
+
   display: flex;
   justify-content: space-between;
-   
+
   border-radius: 20px;
   background: url('/src/assets/illustrations/home/banner-bg.png');
   background-size: cover;
@@ -41,7 +37,7 @@
         font-family: var(--font-family-roboto-light);
       }
       &--primary {
-        font-family: var(--font-family-asap-bold);
+        font-family: var(--font-family-roboto-bold);
         font-size: 50px;
         line-height: 123.19%;
         text-transform: capitalize;
@@ -62,18 +58,21 @@
   position: relative;
   cursor: pointer;
 
-
-  background: linear-gradient(126.59deg, rgba(255, 255, 255, 0.12) 12.11%, rgba(255, 255, 255, 0.03) 73.08%);
+  background: linear-gradient(
+    126.59deg,
+    rgba(255, 255, 255, 0.12) 12.11%,
+    rgba(255, 255, 255, 0.03) 73.08%
+  );
   box-shadow: 0px 3.40709px 20.4425px -0.851771px rgba(0, 0, 0, 0.2);
   backdrop-filter: blur(34.0709px);
 
   &:first-of-type {
     margin-bottom: 30px;
   }
 
-   border: 0.7px solid #cf92ff;
+  border: 0.7px solid #cf92ff;
   // border-image: linear-gradient(to right, rgba(207, 146, 255, 1)  , rgba(255, 255, 255, 1) ) 1;
-   border-radius: 19px;
+  border-radius: 19px;
 
   & .title {
     font-family: var(--font-family-roboto-regular);

src/components/ProfileCard/BasicDetails/index.module.scss

@@ -68,13 +68,14 @@
     margin: 5px 0;
   }
   .value {
-    font-family: var(--font-family-roboto-slab-medium);
+    font-family: var(--font-family-roboto-flex);
     font-weight: 500;
     font-size: 26.5154px;
     color: white;
 
     .label {
-      font-family: var(--font-family-roboto-bold);
+      font-family: var(--font-family-roboto-flex);
+      font-weight: 700;
       font-size: 23px;
       background: -webkit-linear-gradient(
         298.19deg,

src/components/ProfileCard/BasicDetailsEdit/index.module.scss

@@ -106,12 +106,14 @@ body {
   margin: 15px 0;
 
   .value {
-    font-family: var(--font-family-roboto-slab-medium);
+    font-family: var(--font-family-roboto-flex);
+    font-weight: 500;
     font-size: 30px;
     color: white;
 
     .label {
-      font-family: var(--font-family-roboto-bold);
+      font-family: var(--font-family-roboto-flex);
+      font-weight: 700;
       font-size: 23px;
       background: -webkit-linear-gradient(
         298.19deg,

src/styles/_font.scss

@@ -1,56 +1,38 @@
 @import url('https://fonts.googleapis.com/css2?family=Roboto+Flex:opsz,[email protected],300;8..144,400;8..144,500;8..144,600;8..144,700&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@700&display=swap');
+
+@font-face {
+  font-family: RobotoThin;
+  src: url('./fonts/roboto/roboto-thin-webfont.woff2') format('woff2'),
+    url('./fonts/roboto/roboto-thin-webfont.woff') format('woff');
+  font-weight: 100;
+}
 
 @font-face {
   font-family: RobotoLight;
-  src: url('./fonts/roboto/Roboto-Light.ttf') format('truetype');
+  src: url('./fonts/roboto/roboto-light-webfont.woff2') format('woff2'),
+    url('./fonts/roboto/roboto-light-webfont.woff') format('woff');
   font-weight: 300;
 }
 
 @font-face {
   font-family: RobotoRegular;
-  src: url('./fonts/roboto/Roboto-Regular.ttf') format('truetype');
+  src: url('./fonts/roboto/roboto-regular-webfont.woff2') format('woff2'),
+    url('./fonts/roboto/roboto-regular-webfont.woff') format('woff');
   font-weight: 400;
 }
 
 @font-face {
   font-family: RobotoMedium;
-  src: url('./fonts/roboto/Roboto-Medium.ttf') format('truetype');
+  src: url('./fonts/roboto/roboto-medium-webfont.woff2') format('woff2'),
+    url('./fonts/roboto/roboto-medium-webfont.woff') format('woff');
   font-weight: 500;
 }
 
 @font-face {
   font-family: RobotoBold;
-  src: url('./fonts/roboto/Roboto-Bold.ttf') format('truetype');
-  font-weight: 700;
-}
-
-@font-face {
-  font-family: RobotoSlabLight;
-  src: url('./fonts/robotoslab/RobotoSlab-Light.ttf') format('truetype');
-  font-weight: 300;
-}
-
-@font-face {
-  font-family: RobotoSlabRegular;
-  src: url('./fonts/robotoslab/RobotoSlab-Regular.ttf') format('truetype');
-  font-weight: 400;
-}
-
-@font-face {
-  font-family: RobotoSlabMedium;
-  src: url('./fonts/robotoslab/RobotoSlab-Medium.ttf') format('truetype');
-  font-weight: 500;
-}
-
-@font-face {
-  font-family: RobotoSlabSemiBold;
-  src: url('./fonts/robotoslab/RobotoSlab-SemiBold.ttf') format('truetype');
-  font-weight: 600;
-}
-
-@font-face {
-  font-family: RobotoSlabBold;
-  src: url('./fonts/robotoslab/RobotoSlab-Bold.ttf') format('truetype');
+  src: url('./fonts/roboto/roboto-bold-webfont.woff2') format('woff2'),
+    url('./fonts/roboto/roboto-bold-webfont.woff') format('woff');
   font-weight: 700;
 }
 
@@ -84,39 +66,6 @@
   font-weight: 700;
 }
 
-@font-face {
-  font-family: asapRegular;
-  src: url('./fonts/asap/Asap-Regular.ttf') format('truetype');
-  font-weight: 400;
-}
-
-@font-face {
-  font-family: asapMedium;
-  src: url('./fonts/asap/Asap-Medium.ttf') format('truetype');
-  font-weight: 500;
-}
-
-@font-face {
-  font-family: asapSemiBold;
-  src: url('./fonts/asap/Asap-SemiBold.ttf') format('truetype');
-  font-weight: 600;
-}
-
-@font-face {
-  font-family: asapBold;
-  src: url('./fonts/asap/Asap-Bold.ttf') format('truetype');
-  font-weight: 700;
-}
-
-// import monteserrat font from fonts directory
-@font-face {
-  font-family: 'Montserrat';
-  src: url('./fonts/montserrat/Montserrat-Bold.ttf') format('truetype');
-  font-weight: 400;
-  font-style: bold;
-}
-
-
 /*
   * Material icons font file
   * Refer here for getting icons - https://fonts.google.com/icons
@@ -177,22 +126,9 @@
 
   --font-family-roboto-flex: 'Roboto Flex', sans-serif;
 
-  --font-family-roboto-slab-light: RobotoSlabLight, sans-serif;
-  --font-family-roboto-slab-regular: RobotoSlabRegular, sans-serif;
-  --font-family-roboto-slab-medium: RobotoSlabMedium, sans-serif;
-  --font-family-roboto-semi-bold: RobotoSlabSemiBold, sans-serif;
-  --font-family-roboto-slab-bold: RobotoSlabBold, sans-serif;
-
   --font-family-inter-light: InterLight, sans-serif;
   --font-family-inter-regular: InterRegular, sans-serif;
   --font-family-inter-medium: InterMedium, sans-serif;
   --font-family-inter-semi-bold: InterSemiBold, sans-serif;
   --font-family-inter-bold: InterBold, sans-serif;
-
-  --font-family-asap-regular: InterRegular, sans-serif;
-  --font-family-asap-medium: InterMedium, sans-serif;
-  --font-family-asap-semi-bold: InterSemiBold, sans-serif;
-  --font-family-asap-bold: InterBold, sans-serif;
-
-  --font-family-montserrat: Montserrat, sans-serif;
 }