fonts are now locally stored

src/components/header/index.scss

@@ -1,5 +1,10 @@
 @use "../../scss/abstracts/colors" as *;
-@use "../../scss/abstracts/fonts" as *;
+// @use "../../scss/abstracts/fonts" as *;
+
+@font-face {
+	font-family: CutiveMono;
+	src: url(../../fonts/CutiveMono-Regular.ttf);
+}
 
 header {
 	// width: 100vw;
@@ -25,7 +30,7 @@ header {
 		h1 {
 			font-size: 2.5rem;
 			font-weight: 900;
-			font-family: "Cutive Mono";
+			font-family: CutiveMono;
 			color: $dark;
 		}
 

src/components/navbar/index.scss

@@ -1,5 +1,10 @@
 @use "../../scss/abstracts/colors" as *;
-@use "../../scss/abstracts/fonts" as *;
+// @use "../../scss/abstracts/fonts" as *;
+
+@font-face {
+	font-family: CutiveMono;
+	src: url(../../fonts/CutiveMono-Regular.ttf);
+}
 
 #navbar-container {
 	clear: both;
@@ -32,11 +37,11 @@ nav {
 		}
 	}
 
-.title-and-menu {
-	margin: 0 auto;
+	.title-and-menu {
+		margin: 0 auto;
 
 		#navbar-title {
-			font-family: "Cutive Mono";
+			font-family: CutiveMono;
 			font-size: 2.5rem;
 			font-weight: bold;
 			color: $dark;
@@ -47,11 +52,11 @@ nav {
 				padding: 0;
 			}
 		}
-	
-	.menu-toggle-container {
-		display: none;
+
+		.menu-toggle-container {
+			display: none;
+		}
 	}
-}
 	#contact-btn {
 		margin-right: 1.5rem;
 		padding-left: 99px;
@@ -96,8 +101,7 @@ nav {
 		flex-direction: column-reverse;
 		align-items: center;
 	}
-	
-	
+
 	.details {
 		position: absolute;
 		display: flex;
@@ -115,7 +119,7 @@ nav {
 		position: absolute;
 		display: flex;
 		flex-direction: column;
-		align-items:center;
+		align-items: center;
 		top: 4.5rem;
 		background-color: white;
 		width: 100%;
@@ -126,14 +130,15 @@ nav {
 			display: flex;
 			justify-content: center;
 
-			&:hover, &:focus{
+			&:hover,
+			&:focus {
 				background-color: $light;
 			}
 		}
 	}
 
 	.title-and-menu {
-		margin-left: .5rem;
+		margin-left: 0.5rem;
 		display: flex;
 		width: 100%;
 		z-index: 2;
@@ -150,7 +155,8 @@ nav {
 			border-radius: 0.25rem;
 			transition: box-shadow 0.15s ease-in-out;
 
-			&:hover, &:focus {
+			&:hover,
+			&:focus {
 				cursor: pointer;
 				box-shadow: 0 0 1px 1px $dark;
 			}

src/scss/abstracts/_fonts.scss

@@ -1,2 +0,0 @@
-@import url("https://fonts.googleapis.com/css2?family=Cutive+Mono&display=swap");
-@import url("https://fonts.googleapis.com/css2?family=Raleway&display=swap");

src/scss/index.scss

@@ -1,5 +1,8 @@
 @use "./abstracts/colors" as *;
-@use "./abstracts/fonts" as *;
+// @use "./abstracts/fonts" as *;
+
+$CutiveMono: "CutiveMono";
+$Raleway: "Raleway";
 
 .index-made-by-us {
 	.list-card {

src/scss/main.scss

@@ -1,11 +1,15 @@
 @use "./abstracts/colors" as *;
-@use "./abstracts/fonts" as *;
+
+@font-face {
+	font-family: Raleway;
+	src: url(../fonts/Raleway-Regular.ttf);
+}
 
 :root {
 	background: white;
 	color: $dark;
 	font-size: 16px;
-	font-family: "Raleway", "sans-serif";
+	font-family: Raleway;
 }
 
 *::before {