⚡ Better monospace font

assets/css/fonts.scss

@@ -1,2 +1,2 @@
 // Poppins (Google Fonts)
-@import url("https://fonts.googleapis.com/css?family=Material+Icons|Poppins:400,600&display=swap");
+@import url('https://fonts.googleapis.com/css?family=Material+Icons|Poppins:500,700|Roboto+Mono:400&display=swap');

assets/css/styles.scss

@@ -34,13 +34,13 @@ a {
   display: inline-flex;
   color: inherit;
   text-decoration: none;
-  font-weight: 600;
+  font-weight: 700;
 }
 
 body {
   background-color: var(--bg-color);
   color: var(--fg-color);
-  font-weight: 400;
+  font-weight: 500;
   font-size: 16px;
   font-family: "Poppins", "Roboto", "Noto", sans-serif;
   line-height: 1.5;
@@ -53,7 +53,7 @@ h1,
 h2,
 h3 {
   margin: 0;
-  font-weight: 600;
+  font-weight: 700;
 }
 
 h3.title {
@@ -97,7 +97,7 @@ button {
   border-radius: 20px;
   background-color: var(--ac-color);
   color: var(--act-color);
-  font-weight: 600;
+  font-weight: 700;
   font-size: 16px;
   font-family: "Poppins", "Roboto", "Noto", sans-serif;
   transition: all 0.2s ease-in-out;
@@ -140,7 +140,7 @@ legend {
   align-items: center;
   justify-content: center;
   color: var(--fg-color);
-  font-weight: 600;
+  font-weight: 700;
   cursor: pointer;
 
   i {
@@ -199,7 +199,7 @@ pre {
   background-color: var(--bg-dark-color);
   color: var(--fg-color);
   font-size: 16px;
-  font-family: monospace;
+  font-family: 'Roboto Mono', monospace;
   transition: all 0.2s ease-in-out;
   user-select: text;
   width: calc(100% - 8px);
@@ -224,6 +224,7 @@ code {
 .hljs-subst {
   background-color: var(--bg-dark-color) !important;
   color: var(--fg-color) !important;
+  font-family: 'Roboto Mono', monospace;
 }
 
 select,
@@ -377,7 +378,7 @@ fieldset#history {
       position: absolute;
       top: 12px;
       right: 12px;
-      font-family: monospace, monospace;
+      font-family: 'Roboto Mono', monospace;
     }
   }
 }

components/autocomplete.vue

@@ -54,7 +54,7 @@
       display: block;
       padding: 8px 16px;
       font-size: 18px;
-      font-family: monospace;
+      font-family: 'Roboto Mono', monospace;
       white-space: pre-wrap;
 
       &:last-child {

pages/websocket.vue

@@ -62,7 +62,7 @@
     &,
     span {
       font-size: 18px;
-      font-family: monospace;
+      font-family: 'Roboto Mono', monospace;
     }
 
     span {