Fontello, Google Fonts

.gitignore

@@ -1,3 +1,7 @@
+fontello-7bf7a0b6/
+css/
+font/
 plain.json
 reznor88banish.json
-reznor112grimm.json
+reznor112grimm.json
+reznor100.json

HKCheckCompletion.js

@@ -1,8 +1,8 @@
 // ---------------- Constants ----------------- //
 
 const DATA_UNKNOWN = "Data unknown";
-const SYMBOL_FALSE = "❌ ";
-const SYMBOL_TRUE = "✅ ";
+const SYMBOL_FALSE = "<i class='icon-cancel'></i>"; // "❌ ";
+const SYMBOL_TRUE = "<i class='icon-ok-squared'></i>"; // "✅ ";
 
 // ---------------- Variables ----------------- //
 
@@ -45,7 +45,7 @@ const DIV_ID = {
 
 const HK_BOSSES = {
     killedMawlek: "Brooding Mawlek",
-    killedBigBuzzer: "Gruz Mother",
+    killedBigBuzzer: "Gruz Mother", // wrong
     collectorDefeated: "The Collector",
     defeatedMegaJelly: "Uumuu",
     killedMimicSpider: "Nosk",

config.json

@@ -0,0 +1,40 @@
+{
+  "name": "",
+  "css_prefix_text": "icon-",
+  "css_use_suffix": false,
+  "hinting": true,
+  "units_per_em": 1000,
+  "ascent": 850,
+  "glyphs": [
+    {
+      "uid": "1400d5103edd2fa6d2d61688fee79a5a",
+      "css": "ok-squared",
+      "code": 61770,
+      "src": "fontawesome"
+    },
+    {
+      "uid": "5211af474d3a9848f67f945e2ccaf143",
+      "css": "cancel",
+      "code": 59392,
+      "src": "fontawesome"
+    },
+    {
+      "uid": "0f4cae16f34ae243a6144c18a003f2d8",
+      "css": "cancel-circled",
+      "code": 59393,
+      "src": "fontawesome"
+    },
+    {
+      "uid": "12f4ece88e46abd864e40b35e05b11cd",
+      "css": "ok",
+      "code": 59394,
+      "src": "fontawesome"
+    },
+    {
+      "uid": "43ab845088317bd348dee1d975700c48",
+      "css": "ok-circled",
+      "code": 59395,
+      "src": "fontawesome"
+    }
+  ]
+}

index.html

@@ -4,7 +4,9 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
-    <link rel="stylesheet" href="style.css">
+    <link href="https://fonts.googleapis.com/css2?family=Heebo:wght@300;400;700&display=swap" rel="stylesheet">
+    <link href="css/fontello.css" rel="stylesheet" type="text/css">
+    <link href="style.css" rel="stylesheet" type="text/css">
     <title>Hollow Knight Completion Check</title>
     <meta name="description" content="">
 	<meta name="keywords" content="">
@@ -15,14 +17,14 @@
 	<meta property="og:url" content="http://reznortech.rf.gd/hollow-knight-completion">
 	<meta name="twitter:card" content="summary_large_image">
 	<meta property="og:site_name" content="rezno[R].tech">
-	<meta name="twitter:image:alt" content="">
+	<meta name="twitter:image:alt" content="Hollow Knight Completion Check">
 
 	<meta name="author" content="ReznoR Michael">
 	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
     <link rel="icon" href="../favicon.png">
     
     <!-- Global site tag (gtag.js) - Google Analytics -->
-    <!-- <script src="loadJson.js"></script> -->
+    <script src="loadJson.js"></script>
     <script src="HKCheckCompletion.js"></script>
 	<script async src="https://www.googletagmanager.com/gtag/js?id=UA-136831794-2"></script>
 	<script>
@@ -67,7 +69,7 @@
     <h2>Game Completion Status</h2>
     <div id="hk-intro"></div>
 
-    <h2>Bosses</h2>
+    <h2>Bosses (WIP)</h2>
     <div id="hk-bosses"></div>
 
     <h2>Charms</h2>

loadJson.js

@@ -10,7 +10,7 @@ function loadJSON(callback) {
 
     xobj.overrideMimeType("application/json");
 
-    let fileName = ["reznor88banish.json", "reznor112grimm.json"];
+    let fileName = ["reznor88banish.json", "reznor112grimm.json", "reznor100.json"];
 
     // Specifies the request
     /* method: the request type GET or POST

style.css

@@ -2,7 +2,7 @@ html {
     font-size: 16px;
 }
 body {
-    font-family: Arial, Helvetica, sans-serif;
+    font-family: 'Heebo', sans-serif;
 }
 #content {
     width: max-content;
@@ -51,4 +51,10 @@ a:visited {
 }
 a:hover {
     text-decoration: underline;
+}
+.icon-cancel {
+    color: #f03a17;
+}
+.icon-ok-squared {
+    color: #16c60c;
 }