Swap fonts when loading

Author: wcedmisten

components/navbar.module.css

@@ -4,21 +4,21 @@
 }
 
 .NavbarBrand {
-    font-family: 'Roboto';
+    font-family: 'Roboto', sans-serif;
     font-size: 1.25rem;
     padding: 0px 0px 0px 0px;
 }
 
 .Navbar {
     /* padding-bottom: 50px; */
-    font-family: 'Roboto';
+    font-family: 'Roboto', sans-serif;
     font-size: 1.5rem
 }
 
 .NavBarLogoText {
     display: inline-block;
     vertical-align: middle;
     margin: 0 0 0 0;
-    font-family: Rowdies;
+    font-family: Rowdies, sans-serif;
     font-size: 22px
 }

pages/project/paintingguesser.module.css

@@ -10,7 +10,7 @@
 
 .Headers {
     padding: 10px 10px 0px 10px;
-    font-family: Garamond;
+    font-family: Garamond, sans-serif;
 }
 
 
@@ -68,7 +68,7 @@
     padding-top: 5px;
     padding-bottom: 0px;
     background: transparent;
-    font-family: Garamond;
+    font-family: Garamond, sans-serif;
 }
 
 .Button {

styles/styles.css

@@ -3,73 +3,79 @@
     src: url('/fonts/Roboto/Roboto-Regular.ttf');
     font-weight: 400;
     font-style: normal;
+    font-display: swap;
 }
 
 @font-face {
     font-family: 'Roboto-Bold';
     src: url('/fonts/Roboto/Roboto-Bold.ttf');
     font-weight: 400;
     font-style: bold;
+    font-display: swap;
 }
 
 @font-face {
     font-family: 'Roboto Mono';
     src: url('/fonts/Roboto_Mono/RobotoMono-VariableFont_wght.ttf');
     font-weight: 400;
     font-style: normal;
+    font-display: swap;
 }
 
 @font-face {
     font-family: 'Roboto-Light';
     src: url('/fonts/Roboto/Roboto-Light.ttf');
     font-weight: 400;
     font-style: normal;
+    font-display: swap;
 }
 
 @font-face {
     font-family: 'Roboto-Thin';
     src: url('/fonts/Roboto/Roboto-Thin.ttf');
     font-weight: 400;
     font-style: normal;
+    font-display: swap;
 }
 
 @font-face {
     font-family: 'Rowdies';
     src: url('/fonts/Rowdies/Rowdies-Regular.ttf');
     font-weight: 400;
     font-style: normal;
+    font-display: swap;
 }
 
 body {
-    font-family: 'Roboto';
+    font-family: 'Roboto', sans-serif;
     font-size: 1.1em;
     margin: 0 auto;
 }
 
 p,
 li {
-    font-family: 'Roboto';
+    font-family: 'Roboto', sans-serif;
     font-size: 1.1em;
 }
 
 h1 {
     font-size: 2em;
-    font-family: 'Rowdies';
+    font-family: 'Rowdies', sans-serif;
 }
 
 h2 {
     font-size: 1.6em;
-    font-family: 'Roboto';
+    font-family: 'Roboto', sans-serif;
 }
 
 h3 {
     font-size: 1.4em;
-    font-family: 'Roboto-Light';
+    font-family: 'Roboto-Light', sans-serif;
 }
 
 h4 {
     font-size: 1.2em;
-    font-family: 'Roboto-Thin';
+    font-family: 'Roboto-Thin', sans-serif;
 }
 
 code {