use custom font for headers

README.md

@@ -119,5 +119,6 @@ For a particular game netplay needs to be enabled in game settings.
 * [twbs/bootstrap](https://github.com/twbs/bootstrap) - MIT
 * [twbs/icons](https://github.com/twbs/icons) - MIT
 * [sumimakito/Awesome-qr.js](https://github.com/sumimakito/Awesome-qr.js) - Apache-2.0
+* [@fontsource/comfortaa](https://www.npmjs.com/package/@fontsource/comfortaa) - OFL-1.1
 * [EmulatorJS](https://github.com/EmulatorJS/EmulatorJS) - GPL-3.0 (not included)
 * BIOS files from respective vendors (not included)

assets/css/style.css

@@ -5,17 +5,39 @@ h2 {
     font-size: 1.5em;
 }
 
+h1, h2, h3, h4, h5, h6 {
+    font-family: Comfortaa, Avenir, "Avenir Next", "Helvetica Neue", "Segoe UI", Helvetica, Arial, sans-serif;
+    font-weight: 400;
+}
+.navbar .navbar-brand,
+.navbar .nav-link,
+.navbar .navbar-text {
+    font-family: Comfortaa, Avenir, "Avenir Next", "Helvetica Neue", "Segoe UI", Helvetica, Arial, sans-serif;
+    font-weight: 300;
+}
+.empty-state-text {
+    font-family: Comfortaa, Avenir, "Avenir Next", "Helvetica Neue", "Segoe UI", Helvetica, Arial, sans-serif;
+    font-weight: 300;
+    font-size: 1.2em;
+}
+
+/*****************************************************************************/
+
 html[data-bs-theme="dark"] .list-group-hover .list-group-item:hover {
     background-color: rgba(255, 255, 255, .05);
 }
 .list-group-hover .list-group-item:hover {
     background-color: rgba(0, 0, 0, .05);
 }
 
+/*****************************************************************************/
+
 .card .card-body .card-body-collapse {
     padding: 0 !important;
 }
 
+/*****************************************************************************/
+
 #drop-overlay {
     position: absolute;
     left: 0;
@@ -33,6 +55,8 @@ html[data-bs-theme="dark"] .list-group-hover .list-group-item:hover {
     font-size: 1.5em;
 }
 
+/*****************************************************************************/
+
 #keyboard-control-button, #gamepad-control-button {
     font-size: 1.5em;
 }

assets/package.json

@@ -9,6 +9,7 @@
   "author": "",
   "license": "MIT",
   "dependencies": {
+    "@fontsource/comfortaa": "^5.0.11",
     "awesome-qr": "^2.1.5-rc.0",
     "bootstrap": "^5.3.0",
     "bootstrap-icons": "^1.10.5"

templates/includes/empty_state.twig

@@ -2,7 +2,7 @@
     <div style="font-size: 5em">
         <i class="{{ icon }}"></i>
     </div>
-    <div>
+    <div class="empty-state-text">
         {{ text }}
     </div>
 </div>

templates/includes/game_menu.twig

@@ -6,9 +6,9 @@
             aria-expanded="false">
         <i class="bi bi-three-dots"></i>
     </button>
-    <div class="dropdown-menu" aria-labelledby="game-menu-{{game.Id}}" style="max-width: 250px;">
+    <div class="dropdown-menu" aria-labelledby="game-menu-{{game.Id}}" style="max-width: 300px;">
         {% if game_menu_title %}
-            <p class="p-2 lead">{{ game.Name }}</p>
+            <h6 class="p-2">{{ game.Name }}</h6>
             <div class="dropdown-divider"></div>
         {% endif %}
         <a class="dropdown-item" href="/games/save-states/{{ game.Id }}">Save states</a>

templates/includes/layout_head.twig

@@ -8,6 +8,8 @@
 
 <link rel="stylesheet" href="/assets/node_modules/bootstrap/dist/css/bootstrap.min.css">
 <link rel="stylesheet" href="/assets/node_modules/bootstrap-icons/font/bootstrap-icons.css">
+<link rel="stylesheet" href="/assets/node_modules/@fontsource/comfortaa/300.css">
+<link rel="stylesheet" href="/assets/node_modules/@fontsource/comfortaa/400.css">
 <link rel="stylesheet" href="/assets/css/style.css">
 
 <script src="/assets/node_modules/@popperjs/core/dist/umd/popper.min.js"></script>

templates/settings.twig

@@ -28,7 +28,7 @@
     <div class="list-group list-group-hover mb-3">
         {% for platform in platforms %}
             {% if platform.Id %}
-                <a class="list-group-item list-group-item-action" href="/settings/{{ platform.Id }}">{{ platform.Name }}</a>
+                <a class="lead list-group-item list-group-item-action" href="/settings/{{ platform.Id }}">{{ platform.Name }}</a>
             {% endif %}
         {% endfor %}
     </div>