use downloaded fonts

public/index.js

@@ -1,10 +1,3 @@
-// // images
-// import bgPatternDesktop from './assets/images/bg-pattern-desktop.svg'
-// import bgPatternMobile from './assets/images/bg-pattern-mobile.svg'
-// import chevron from './assets/images/icon-arrow-down.svg'
-// import boxDesktop from './assets/images/illustration-box-desktop.svg'
-// import womanOnlineDesktop from './assets/images/illustration-woman-online-desktop.svg'
-// import womanOnlineMobile from './assets/images/illustration-woman-online-mobile.svg'
 // styles
 import './styles/reset.scss'
 import './styles/main.scss'

public/styles/main.scss

@@ -1,6 +1,21 @@
 @use 'mixins' as *;
 @use 'palette' as *;
 
+@font-face {
+	font-family: "KumbhSans-Bold";
+	src: url("../assets/fonts/KumbhSans-Bold.ttf") format("ttf");
+}
+
+@font-face {
+	font-family: "KumbhSans-Light";
+	src: url("../assets/fonts/KumbhSans-Light.ttf") format("ttf");
+}
+
+@font-face {
+	font-family: "KumbhSans-Regular";
+	src: url("../assets/fonts/KumbhSans-Regular.ttf") format("ttf");
+}
+
 body {
 	background-image: $gradient;
 	display: flex;
@@ -13,6 +28,7 @@ body {
 .cardContainer {
 	@include faq-card-container;
 	@include flex-row;
+	font-family: "KumbhSans-Regular";
 
 	@media screen and (max-width: 1100px) {
 		@include flex-column;
@@ -49,6 +65,7 @@ body {
 
 		h1 {
 			@include faq-card-container-header;
+			font-family: "KumbhSans-Bold";
 
 			@media screen and (max-width: 1100px) {
 				align-self: center;
@@ -83,10 +100,18 @@ body {
 
 		.faqContainer__item__header--active {
 			@include desktop-active-item-header;
+			font-family: "KumbhSans-Bold";
+			font-weight: 700;
+			font-size: 14px;
+			line-height: 14px;
 		}
 
 		.faqContainer__item__header {
 			@include desktop-inactive-item-header;
+			font-family: "KumbhSans-Regular";
+			font-weight: 400;
+			font-size: 14px;
+			line-height: 14px;
 
 			&:hover {
 				color: $cardActiveItemHeaderHoverColor;
@@ -118,6 +143,10 @@ body {
 
 		.faqContainer__item__answer {
 			display: none;
+			font-family: "KumbhSans-Regular";
+			font-size: 12px;
+			font-weight: 400;
+			line-height: 18px;
 		}
 
 		div:first-of-type {

webpack-common.config.js

@@ -13,13 +13,21 @@ module.exports = {
                 use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader']
             },
             {
-                test: /\.(png|svg|jpg|gif)$/,
+                test: /\.(png|svg|jpg|gif|ttf)$/,
                 use: [
                     {
                         loader: 'url-loader', 
                     }
                 ],
             },
+            {
+                test: /\.(woff|woff2|eot|ttf|otf)$/,
+                use: [
+                    {
+                        loader: 'file-loader'
+                    }
+                ],
+            }
         ]
     },
     plugins: [