Display text while fonts are loading

Display text in a locally available font while custom fonts are loading.

Author: alinnert

src/sass/elements.scss

@@ -30,7 +30,7 @@ a {
 }
 
 kbd {
-  font-family: Roboto Mono, monospace;
+  font-family: Roboto Mono, Cascadia Code, Consolas, monospace;
   font-size: 14px;
   color: var(--input-text-color);
   background-color: var(--footer-background);

src/sass/fonts.scss

@@ -1,29 +1,34 @@
 @font-face {
   font-family: 'Roboto';
   font-weight: 400;
+  font-display: swap;
   src: url('../assets/fonts/roboto-regular.ttf') format('truetype');
 }
 
 @font-face {
   font-family: 'Roboto';
   font-weight: 500;
+  font-display: swap;
   src: url('../assets/fonts/roboto-medium.ttf') format('truetype');
 }
 
 @font-face {
   font-family: 'Roboto';
   font-weight: 600;
+  font-display: swap;
   src: url('../assets/fonts/roboto-bold.ttf') format('truetype');
 }
 
 @font-face {
   font-family: 'Roboto Mono';
   font-weight: 400;
+  font-display: swap;
   src: url('../assets/fonts/robotomono-regular.ttf') format('truetype');
 }
 
 @font-face {
   font-family: 'Roboto Mono';
   font-weight: 600;
+  font-display: swap;
   src: url('../assets/fonts/robotomono-bold.ttf') format('truetype');
 }