Change Font Asty To Poppins

src/js/game.js

@@ -140,12 +140,12 @@ document.addEventListener("DOMContentLoaded", function () {
         }
     }
     function drawScore() {
-        ctx.font = "18px Asty-Thin";
+        ctx.font = "18px poppins-extralight";
         ctx.fillStyle = "#6ddbf2";
         ctx.fillText("Score: " + score, 8, 20);
     }
     function drawLives() {
-        ctx.font = "18px Asty-Thin";
+        ctx.font = "18px poppins-extralight";
         ctx.fillStyle = "#6ddbf2";
         ctx.fillText("Lives: " + lives, canvas.width - 65, 20);
     }

src/scss/components/_fonts.scss

@@ -1,23 +1,23 @@
-// Asty
+// Poppins
 @font-face {
-    font-family: 'Asty-Thin';
-    src: url('../../assets/fonts/asty/AstyCFStdThin.otf');
+    font-family: 'Poppins-Light';
+    src: url('../../assets/fonts/poppins/Poppins-Light.ttf');
 }
 
 @font-face {
-    font-family: 'Asty-Book';
-    src: url('../../assets/fonts/asty/AstyCFStdBook.otf');
+    font-family: 'Poppins-ExtraLight';
+    src: url('../../assets/fonts/poppins/Poppins-ExtraLight.ttf');
 }
 
 
-$asty: (
-    "asty-thin": "Asty-Thin",
-    "asty-book": "Asty-Book",
+$poppins: (
+    "poppins-light": "Poppins-Light",
+    "poppins-extralight": "Poppins-ExtraLight",
 );
-// map.get($asty, "asty-book");
+// map.get($poppins, "poppins-light");
 
-@each $key, $value in $asty {
-    .asty-#{$key} {
+@each $key, $value in $poppins {
+    .poppins-#{$key} {
         font-family: $value, 'sans-serif';
     }
 }

src/scss/components/_header.scss

@@ -29,7 +29,7 @@
         padding: 0 24px;
         white-space: nowrap;
         @include clamp('font-size', 24px, 3.54166666667vw, 68px);
-        font-family: map-get($map: $asty, $key: 'asty-thin');
+        font-family: map-get($map: $poppins, $key: 'poppins-extralight');
         color: $white;
 
         @include media-breakpoint-down(md) {

src/scss/styles.scss

@@ -8,7 +8,7 @@
 
 html, body {
     overflow-x: hidden;
-    font-family: map-get($map: $asty, $key: 'asty-book');
+    font-family: map-get($map: $poppins, $key: 'poppins-light');
 }
 
 ::selection {
@@ -50,7 +50,7 @@ html, body {
         z-index: $z-index-header;
         @include clamp('font-size', 24px, 3.38541666667vw, 65px);
         transition: all 0.1s linear;
-        font-family: map-get($map: $asty, $key: 'asty-thin');
+        font-family: map-get($map: $poppins, $key: 'poppins-extralight');
     }
 
     img {
@@ -89,7 +89,7 @@ html, body {
 }
 
 body {
-    font-family: map-get($map: $asty, $key: 'asty-book');
+    font-family: map-get($map: $poppins, $key: 'poppins-light');
     background: url('../../assets/img/lain.webp') left / cover;
     color: $thirdcolor;
     cursor: url(../../assets/img/cursor/dot-outline-thin.svg) 4 12, auto;
@@ -106,7 +106,7 @@ body {
 }
 
 h1, h2, h3 {
-    font-family: map-get($map: $asty, $key: 'asty-thin');
+    font-family: map-get($map: $poppins, $key: 'poppins-extralight');
     color: $white;
 }
 
@@ -138,11 +138,11 @@ h1 {
 
     p {
         font-size: 16px;
-        line-height: 17px;
+        line-height: 20px;
 
         @include media-breakpoint-down(md) {
             font-size: 11px;
-            line-height: 13px;
+            line-height: 15px;
         }
     }
 }
@@ -232,7 +232,7 @@ h1 {
 
 
 .close-button {
-    font-family: map-get($map: $asty, $key: 'asty-thin');
+    font-family: map-get($map: $poppins, $key: 'poppins-extralight');
     cursor: url(../../assets/img/cursor/dot-thin.svg) 4 12, auto;
     z-index: 999;
     position: absolute;
@@ -307,7 +307,7 @@ h1 {
 #termsfeed-com---nb {
     background: transparent;
     .cc-nb-main-container, .cc-pc-container {
-        font-family: map-get($map: $asty, $key: 'asty-book');
+        font-family: map-get($map: $poppins, $key: 'poppins-light');
         padding: 2rem 2rem 1rem 2rem;
         background: transparent;
         color: $white;
@@ -405,21 +405,21 @@ div.termsfeed-com---pc-dialog {
       }
 
       .cc-cp-body-tabs {
-        font-family: map-get($map: $asty, $key: 'asty-book');
+        font-family: map-get($map: $poppins, $key: 'poppins-light');
         background: transparent;
         min-width: 250px;
         width: 250px;
       }
 
     .cc-pc-head, .cc-pc-container, .cc-cp-body-content, .cc-cp-body-content-entry, .cc-cp-body, .cc-cp-foot {
         background: transparent !important;
-        font-family: map-get($map: $asty, $key: 'asty-book');
+        font-family: map-get($map: $poppins, $key: 'poppins-light');
         border: none;
     }
 
     .cc-cp-body-tabs-item, .cc-cp-body-tabs-item[active="true"] {
         background: transparent !important;
-        font-family: map-get($map: $asty, $key: 'asty-book');
+        font-family: map-get($map: $poppins, $key: 'poppins-light');
         border: none;
         cursor: url(../../assets/img/cursor/dot-thin.svg) 4 12, auto;
     }
@@ -482,7 +482,7 @@ div.termsfeed-com---pc-dialog {
     }
 
     button.cc-cp-foot-save {
-        font-family: map-get($map: $asty, $key: 'asty-book');
+        font-family: map-get($map: $poppins, $key: 'poppins-light');
         background-color: transparent;
         color: $primarycolor;
         border: none;
@@ -497,7 +497,7 @@ div.termsfeed-com---pc-dialog {
 
     .cc-cp-foot-byline {
         color: $white;
-        font-family: map-get($map: $asty, $key: 'asty-book');
+        font-family: map-get($map: $poppins, $key: 'poppins-light');
 
         a {
             color: $primarycolor;

src/ts/game.ts

@@ -163,13 +163,13 @@ document.addEventListener("DOMContentLoaded", function() {
   }
 
   function drawScore() {
-    ctx.font = "18px Asty-Thin";
+    ctx.font = "18px poppins-extralight";
     ctx.fillStyle = "#6ddbf2";
     ctx.fillText("Score: " + score, 8, 20);
   }
 
   function drawLives() {
-    ctx.font = "18px Asty-Thin";
+    ctx.font = "18px poppins-extralight";
     ctx.fillStyle = "#6ddbf2";
     ctx.fillText("Lives: " + lives, canvas.width - 65, 20);
   }