new-design: Use Fira Sans font

Author: Turbo87

app/index.html

@@ -13,6 +13,7 @@
 
     <link rel="stylesheet" href="{{rootURL}}assets/vendor.css">
     <link rel="stylesheet" href="{{rootURL}}assets/cargo.css">
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Fira+Sans:ital,wght@0,400;0,600;0,800;1,400;1,600;1,800&display=swap">
 
     <link rel="manifest" href="{{rootURL}}manifest.webmanifest">
     <meta name="msapplication-config" content="{{rootURL}}browserconfig.xml">

app/styles/application.module.css

@@ -6,6 +6,9 @@
     --header-bg-color: var(--dark-green);
     --footer-bg-color: var(--dark-green);
 
+    /* Use the modern font stack inspired by Bootstrap 4 */
+    --font-family: -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";
+
     --main-color: #383838;
     --main-color-light: #858585;
     --main-bg: #f9f7ec;
@@ -20,6 +23,8 @@
     --header-bg-color: var(--violet);
     --main-bg: white;
     --footer-bg-color: var(--dark-grey);
+
+    --font-family: "Fira Sans", sans-serif;
 }
 
 * {
@@ -35,8 +40,7 @@ html, body {
 }
 
 body {
-    /* Use the modern font stack inspired by Bootstrap 4 */
-    font-family: -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";
+    font-family: var(--font-family);
     font-size: 16px;
     display: flex;
     flex-direction: column;
@@ -119,6 +123,7 @@ noscript {
     background: white;
     box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
     color: black;
+    font-family: sans-serif;
     cursor: pointer;
 
     &:hover {