Add new Asap font for the game

Kovah · Jul 23, 2021 · 7be8dcf · 7be8dcf
1 parent 0db8494
commit 7be8dcf
Show file tree

Hide file tree

Showing 11 changed files with 35 additions and 7 deletions.
diff --git a/src/App.vue b/src/App.vue
@@ -20,9 +20,6 @@ export default {
     Game,
     Highscores
   },
-  mounted () {
-    this.$store.commit('initHighscores');
-  },
   methods: {
     beforeLeave() {
       window.scrollTo({ top: 0, behavior: 'smooth' });
@@ -32,6 +29,5 @@ export default {
 </script>
 
 <style type="text/css" lang="scss">
-@import url('https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300|Open+Sans:400,700&display=swap');
 @import "@/styles/app.scss";
 </style>
diff --git a/src/assets/fonts/subset-Asap-Bold.woff b/src/assets/fonts/subset-Asap-Bold.woff
diff --git a/src/assets/fonts/subset-Asap-Bold.woff2 b/src/assets/fonts/subset-Asap-Bold.woff2
diff --git a/src/assets/fonts/subset-Asap-Regular.woff b/src/assets/fonts/subset-Asap-Regular.woff
diff --git a/src/assets/fonts/subset-Asap-Regular.woff2 b/src/assets/fonts/subset-Asap-Regular.woff2
diff --git a/src/assets/fonts/subset-AsapCondensed-Regular.woff b/src/assets/fonts/subset-AsapCondensed-Regular.woff
diff --git a/src/assets/fonts/subset-AsapCondensed-Regular.woff2 b/src/assets/fonts/subset-AsapCondensed-Regular.woff2
diff --git a/src/components/Game/GameContent/_gameContent.scss b/src/components/Game/GameContent/_gameContent.scss
@@ -76,7 +76,6 @@
     color: darken($red, 20%);
     font-family: $font-family-condensed;
     font-size: $font-size-lg;
-    font-weight: bold;
 
     @media screen and (min-width: $screen-lg) {
       font-size: $font-size-xl;

diff --git a/src/styles/_fonts.scss b/src/styles/_fonts.scss
@@ -0,0 +1,32 @@
+$font-dir: "~@/assets/fonts";
+
+@font-face {
+  font-family: 'Asap';
+  src: local('Asap Regular'), local('Asap-Regular'),
+  url('#{$font-dir}/subset-Asap-Regular.woff2') format('woff2'),
+  url('#{$font-dir}/subset-Asap-Regular.woff') format('woff');
+  font-weight: normal;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Asap';
+  src: local('Asap Bold'), local('Asap-Bold'),
+  url('#{$font-dir}/subset-Asap-Bold.woff2') format('woff2'),
+  url('#{$font-dir}/subset-Asap-Bold.woff') format('woff');
+  font-weight: bold;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Asap Condensed';
+  src: local('Asap Condensed Regular'), local('AsapCondensed-Regular'),
+  url('#{$font-dir}/subset-AsapCondensed-Regular.woff2') format('woff2'),
+  url('#{$font-dir}/subset-AsapCondensed-Regular.woff') format('woff');
+  font-weight: normal;
+  font-style: normal;
+  font-display: swap;
+}
+
diff --git a/src/styles/_variables.scss b/src/styles/_variables.scss
@@ -69,9 +69,9 @@ $spacer-4: $spacer * 1.5;
 $spacer-5: $spacer * 3;
 
 // Font Vars
-$font-family-base: 'Open Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+$font-family-base: 'Asap', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
 $font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
-$font-family-condensed: 'Open Sans Condensed', $font-family-base;
+$font-family-condensed: 'Asap Condensed', $font-family-base;
 
 $font-weight-base: 400;
 $font-weight-bold: 600;

diff --git a/src/styles/app.scss b/src/styles/app.scss
@@ -4,6 +4,7 @@
  */
 
 @import "variables";
+@import "fonts";
 
 @import "base/reboot";
 @import "base/typo";