add FiraGO & Fira Code npm deps with local src

app/package-lock.json

@@ -2537,6 +2537,16 @@
       "integrity": "sha512-1Yj8h9Q+QDF5FzhMs/c9+6UntbD5MkRfRwac8DoEm9ZfUBZ7tZ55YcGVAzEe4bXsdQHEk+s9S5wsOKVdZrw0tQ==",
       "dev": true
     },
+    "bindings": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/bindings/-/bindings-1.5.0.tgz",
+      "integrity": "sha512-p2q/t/mhvuOj/UeLlV6566GD/guowlr0hHxClI0W9m7MWYkL1F0hLo+0Aexs9HSPCtR1SXQ0TD3MMKrXZajbiQ==",
+      "dev": true,
+      "optional": true,
+      "requires": {
+        "file-uri-to-path": "1.0.0"
+      }
+    },
     "bluebird": {
       "version": "3.7.2",
       "resolved": "https://registry.npmjs.org/bluebird/-/bluebird-3.7.2.tgz",
@@ -5617,6 +5627,13 @@
         "schema-utils": "^2.5.0"
       }
     },
+    "file-uri-to-path": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/file-uri-to-path/-/file-uri-to-path-1.0.0.tgz",
+      "integrity": "sha512-0Zt+s3L7Vf1biwWZ29aARiVYLx7iMGnEUl9x33fbB/j3jR81u/O2LbqK+Bm1CDSNDKVtJ/YjwY7TUd5SkeLQLw==",
+      "dev": true,
+      "optional": true
+    },
     "filesize": {
       "version": "3.6.1",
       "resolved": "https://registry.npmjs.org/filesize/-/filesize-3.6.1.tgz",
@@ -5704,6 +5721,11 @@
         "locate-path": "^3.0.0"
       }
     },
+    "firacode": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/firacode/-/firacode-5.2.0.tgz",
+      "integrity": "sha512-Q1SO7vibzYcT+KaohGK0ypGS58zLtO2o2UuiLvngTEhBbHQoZmZ4DAiugj0MNNpeM4jG9gM9NyusVDM3MxYP7A=="
+    },
     "flat": {
       "version": "5.0.2",
       "resolved": "https://registry.npmjs.org/flat/-/flat-5.0.2.tgz",
@@ -5754,6 +5776,11 @@
       "integrity": "sha512-aq6gF1BEKje4a9i9+5jimNFIpq4Q1WiwBToeRK5NvZBd/TRsmW8BsJfOEGkr76TbOyPVD3OVDN910EcUNtRYEA==",
       "dev": true
     },
+    "fontsource-firago": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/fontsource-firago/-/fontsource-firago-3.0.2.tgz",
+      "integrity": "sha512-YeiesuKrbpY+Ll0sbnYpajlbeaHkwF5HyXU4m9RVPF3Ah+aDX8698JmIJe083gpdavOYspMg1XBtG132v32viw=="
+    },
     "for-in": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/for-in/-/for-in-1.0.2.tgz",
@@ -7778,6 +7805,13 @@
         "thenify-all": "^1.0.0"
       }
     },
+    "nan": {
+      "version": "2.14.2",
+      "resolved": "https://registry.npmjs.org/nan/-/nan-2.14.2.tgz",
+      "integrity": "sha512-M2ufzIiINKCuDfBSAUr1vWQ+vuVcA9kqx8JJUsbQi6yf1uGRyb7HfpdfUr5qLXf3B/t8dPvcjhKMmlfnP47EzQ==",
+      "dev": true,
+      "optional": true
+    },
     "nanomatch": {
       "version": "1.2.13",
       "resolved": "https://registry.npmjs.org/nanomatch/-/nanomatch-1.2.13.tgz",
@@ -12041,7 +12075,11 @@
           "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-1.2.13.tgz",
           "integrity": "sha512-oWb1Z6mkHIskLzEJ/XWX0srkpkTQ7vaopMQkyaEIoq0fmtFVxOthb8cCxeT+p3ynTdkk/RZwbgG4brR5BeWECw==",
           "dev": true,
-          "optional": true
+          "optional": true,
+          "requires": {
+            "bindings": "^1.5.0",
+            "nan": "^2.12.1"
+          }
         },
         "glob-parent": {
           "version": "3.1.0",
@@ -12343,7 +12381,11 @@
           "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-1.2.13.tgz",
           "integrity": "sha512-oWb1Z6mkHIskLzEJ/XWX0srkpkTQ7vaopMQkyaEIoq0fmtFVxOthb8cCxeT+p3ynTdkk/RZwbgG4brR5BeWECw==",
           "dev": true,
-          "optional": true
+          "optional": true,
+          "requires": {
+            "bindings": "^1.5.0",
+            "nan": "^2.12.1"
+          }
         },
         "glob-parent": {
           "version": "3.1.0",

app/package.json

@@ -15,6 +15,8 @@
     "bootstrap-vue": "^2.18.1",
     "core-js": "^3.6.5",
     "date-fns": "^2.16.1",
+    "firacode": "^5.2.0",
+    "fontsource-firago": "^3.0.2",
     "fork-awesome": "^1.1.7",
     "vue": "^2.6.12",
     "vue-i18n": "^8.22.1",

app/src/scss/_variables.scss

@@ -23,9 +23,22 @@ $purple: #9932cc;
 $yellow: #ffd452;
 
 $theme-colors: (
-  "best": $purple
+  'best': $purple
 );
 
+// Replace font-weight 300 with 200
+$font-weight-light: 200;
+$display1-weight: 200;
+$display2-weight: 200;
+$display3-weight: 200;
+$display4-weight: 200;
+$lead-font-weight: 200;
+
+// Set fonts
+$font-family-sans-serif: 'FiraGO', 'Fira Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji' !default;
+$font-family-monospace: 'Fira Code', SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace !default;
+
+
 @import '~bootstrap/scss/functions.scss';
 @import '~bootstrap/scss/variables';
 @import '~bootstrap/scss/mixins.scss';

app/src/scss/font.scss

@@ -0,0 +1,114 @@
+/*
+  ╭─────────────────────────╮
+  │  ┌─╴╶┬╴┌─╮╭─┐   ╭─╮╭─╮  │
+  │  ├─╴ │ ├┬╯├─┤   │╶╮│ │  │
+  │  ╵  ╶┴╴╵ ╰╵ ╵   ╰─╯╰─╯  │
+  ╰─────────────────────────╯
+*/
+
+/* firago-all-300-italic*/
+@font-face {
+  font-family: 'FiraGO';
+  src:
+    local('FiraGO ExtraLight Italic'),
+    url('~fontsource-firago/files/firago-all-200-italic.woff2') format('woff2'),
+    url('~fontsource-firago/files/firago-all-200-italic.woff') format('woff');
+  font-weight: 200;
+  font-style: italic;
+  font-display: swap;
+}
+/* firago-all-300-normal*/
+@font-face {
+  font-family: 'FiraGO';
+  src:
+    local('FiraGO ExtraLight'),
+    url('~fontsource-firago/files/firago-all-200-normal.woff2') format('woff2'),
+    url('~fontsource-firago/files/firago-all-200-normal.woff') format('woff');
+  font-weight: 200;
+  font-style: normal;
+  font-display: swap;
+}
+/* firago-all-400-italic*/
+@font-face {
+  font-family: 'FiraGO';
+  src:
+    local('FiraGO Italic'),
+    url('~fontsource-firago/files/firago-all-400-italic.woff2') format('woff2'),
+    url('~fontsource-firago/files/firago-all-400-italic.woff') format('woff');
+  font-weight: 400;
+  font-style: italic;
+  font-display: swap;
+}
+/* firago-all-400-normal*/
+@font-face {
+  font-family: 'FiraGO';
+  src:
+    local('FiraGO Regular'),
+    url('~fontsource-firago/files/firago-all-400-normal.woff2') format('woff2'),
+    url('~fontsource-firago/files/firago-all-400-normal.woff') format('woff');
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+}
+/* firago-all-500-italic*/
+@font-face {
+  font-family: 'FiraGO';
+  src:
+    local('FiraGO Medium Italic'),
+    url('~fontsource-firago/files/firago-all-500-italic.woff2') format('woff2'),
+    url('~fontsource-firago/files/firago-all-500-italic.woff') format('woff');
+  font-weight: 500;
+  font-style: italic;
+  font-display: swap;
+}
+/* firago-all-500-normal*/
+@font-face {
+  font-family: 'FiraGO';
+  src:
+    local('FiraGO Medium'),
+    url('~fontsource-firago/files/firago-all-500-normal.woff2') format('woff2'),
+    url('~fontsource-firago/files/firago-all-500-normal.woff') format('woff');
+  font-weight: 500;
+  font-style: normal;
+  font-display: swap;
+}
+/* firago-all-700-italic*/
+@font-face {
+  font-family: 'FiraGO';
+  src:
+    local('FiraGO Bold Italic'),
+    url('~fontsource-firago/files/firago-all-700-italic.woff2') format('woff2'),
+    url('~fontsource-firago/files/firago-all-700-italic.woff') format('woff');
+  font-weight: 700;
+  font-style: italic;
+  font-display: swap;
+}
+/* firago-all-700-normal*/
+@font-face {
+  font-family: 'FiraGO';
+  src:
+    local('FiraGO Bold'),
+    url('~fontsource-firago/files/firago-all-700-normal.woff2') format('woff2'),
+    url('~fontsource-firago/files/firago-all-700-normal.woff') format('woff');
+  font-weight: 700;
+  font-style: normal;
+  font-display: swap;
+}
+
+/*
+  ╭───────────────────────────────╮
+  │  ┌─╴╶┬╴┌─╮╭─┐   ╭─╴╭─╮┌─╮┌─╴  │
+  │  ├─╴ │ ├┬╯├─┤   │  │ ││ │├─╴  │
+  │  ╵  ╶┴╴╵ ╰╵ ╵   ╰─╴╰─╯└─╯╰─╴  │
+  ╰───────────────────────────────╯
+*/
+
+@font-face {
+  font-family: 'Fira Code';
+  src:
+    local('Fira Code Regular'),
+    url('~firacode/distr/woff2/FiraCode-Regular.woff2') format('woff2'),
+    url('~firacode/distr/woff/FiraCode-Regular.woff') format('woff');
+  font-weight: 400;
+  font-style: normal;
+}

app/src/scss/main.scss

@@ -11,6 +11,8 @@
 @import '~bootstrap/scss/bootstrap.scss';
 @import '~bootstrap-vue/src/index.scss';
 
+// Import fonts
+@import 'font';
 @import '~fork-awesome/scss/fork-awesome.scss';
 
 
@@ -23,7 +25,6 @@ body {
   overflow-x: hidden;
   min-height: 100vh;
   margin: 0;
-  font-family: "Source Sans Pro", "Helvetica Neue", "Fira Sans", Helvetica, Arial, sans-serif;
 }
 
 #app {