feat: new font

index.html

@@ -94,7 +94,7 @@
       </tr>
     </table>
     <template v-if="table.length">
-      <h2>Output Table</h2>
+      <h2>{{vegetable2}} Output (Vege)Table</h2>
       <table id="output" class="output">
         <colgroup>
           <col style="width: 25%">

main.js

@@ -240,6 +240,11 @@ const app = createApp({
         utils.randomInt(Object.keys(VEGETABLES).length, this.config.seed)
       ];
     },
+    vegetable2() {
+      return Object.keys(VEGETABLES)[
+        utils.randomInt(Object.keys(VEGETABLES).length, this.config.seed + 1)
+      ];
+    },
     startTimeMinute() {
       return Math.floor(
         Date.parse(`1970-01-01T${this.config.startTime}:00Z`) / 60000

style.css

@@ -82,6 +82,7 @@ CUSTOM STYLE
 
 @import url("https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,100..700;1,100..700&display=swap");
 @import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap");
+@import url('https://fonts.cdnfonts.com/css/hey-kids');
 
 :root {
   /* https://materialui.co/colors/ */
@@ -176,6 +177,10 @@ APP STYLE
 =================================================
 */
 
+h1, h2 {
+  font-family: "Hey Kids", "Roboto", Verdana, serif;
+}
+
 .button {
   display: block;
   width: 100%;