add more font-weights so fonts are not rendered blurry

CHANGELOG.md

@@ -1,2 +1,5 @@
 Added:
-- `Report Bugs` and `Changelog` buttons to `Settings > About`
+- `Report Bugs` and `Changelog` buttons to `Settings > About`
+
+Fixed:
+- Fonts looking blurry

src/styles/Fonts.scss

@@ -0,0 +1,32 @@
+// GoogleSans: https://www.cufonfonts.com/font/google-sans
+// Roboto:     https://fonts.google.com/specimen/Roboto
+$font-names: (
+    "glue": "GoogleSans",
+    "info": "Roboto"
+);
+$font-styles: (
+    "Thin": 100,
+    "Light": 300,
+    "Regular": 400,
+    "Medium": 500,
+    "Bold": 700,
+    "Black": 900
+);
+
+@each $prefix, $font in $font-names {
+    @each $style, $weight in $font-styles {
+        @font-face {
+            font-family: $font;
+            font-weight: $weight;
+            font-style: normal;
+            src: url("glue-resources/fonts/#{$font}-#{$style}.ttf") format("truetype");
+        }
+    }
+}
+
+body {
+    --glue-font-family: #{map-get($font-names, "glue")}, #{map-get($font-names, "info")}, spotify-circular, spotify-circular-cyrillic, spotify-circular-arabic, spotify-circular-hebrew, Helvetica Neue, helvetica, arial, Hiragino Kaku Gothic Pro, Meiryo, MS Gothic, sans-serif;
+    --info-font-family: #{map-get($font-names, "info")}, spotify-circular, spotify-circular-cyrillic, spotify-circular-arabic, spotify-circular-hebrew, Helvetica Neue, helvetica, arial, Hiragino Kaku Gothic Pro, Meiryo, MS Gothic, sans-serif;
+    font-family: var(--glue-font-family);
+    letter-spacing: normal;
+}

src/styles/main.scss

@@ -4,6 +4,7 @@
 }
 
 @import "Colors";
+@import "Fonts";
 @import "Inputs";
 @import "ConfigMenu";
 @import "ContextMenu.scss";
@@ -22,41 +23,6 @@
     --song-transition-speed: 3s;
 }
 
-@font-face {
-    font-family: "Google Sans Display";
-    src: url("glue-resources/fonts/GoogleSansDisplayRegular.woff2") format("woff2");
-    font-style: normal;
-    font-weight: 400;
-}
-
-@font-face {
-    font-family: "Google Sans Display";
-    src: url("glue-resources/fonts/GoogleSansDisplayMedium.woff2") format("woff2");
-    font-style: normal;
-    font-weight: 500;
-}
-
-@font-face {
-    font-family: "Roboto";
-    src: url("glue-resources/fonts/Roboto.woff2") format("woff2");
-    font-style: normal;
-    font-weight: 400;
-}
-
-@font-face {
-    font-family: "Roboto";
-    src: url("glue-resources/fonts/RobotoMedium.woff2") format("woff2");
-    font-style: normal;
-    font-weight: 500;
-}
-
-body {
-    --glue-font-family: "Google Sans Display", "Roboto", spotify-circular, spotify-circular-cyrillic, spotify-circular-arabic, spotify-circular-hebrew, Helvetica Neue, helvetica, arial, Hiragino Kaku Gothic Pro, Meiryo, MS Gothic, sans-serif;
-    --info-font-family: "Roboto", spotify-circular, spotify-circular-cyrillic, spotify-circular-arabic, spotify-circular-hebrew, Helvetica Neue, helvetica, arial, Hiragino Kaku Gothic Pro, Meiryo, MS Gothic, sans-serif;
-    font-family: var(--glue-font-family);
-    letter-spacing: normal;
-}
-
 .os-scrollbar-handle {
     background-color: spiceColor("text") !important;
     border-radius: calc(var(--scrollbar-vertical-size) / 2);