Use a modern font stack inspired by Bootstrap 4

Author: Calinou

app/styles/app.scss

@@ -33,7 +33,8 @@ html {
 html, body { margin: 0; }
 
 body {
-  font-family: "Helvetica Neue","Helvetica",Helvetica,Arial,sans-serif;
+  // 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-size: 16px;
   display: flex;
   flex-direction: column;
@@ -101,7 +102,8 @@ pre {
     background: $main-color;
     color: white;
     padding: 20px;
-    font-family: Consolas, Monaco, 'Andale Mono', monospace;
+    // Use the modern font stack inspired by Bootstrap 4
+    font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
 }
 
 button.dropdown, a.dropdown {