Improve web font

Fix the text position and use mononoki just like for non-wasm

Author: tomassedovic

dose-response.js

@@ -9,7 +9,7 @@ document.body.append(c);
 
 var ctx = c.getContext('2d');
 ctx.textAlign = "center";
-ctx.font = '16px arial';
+ctx.font = '14px mononoki';
 
 var wasm_instance;
 var gamestate_ptr;
@@ -150,7 +150,10 @@ fetch('target/wasm32-unknown-unknown/release/dose-response.wasm')
             ctx.fillRect(x * squareSize, y * squareSize, squareSize, squareSize);
           } else {
             ctx.fillStyle = `rgb(${r},${g},${b})`;
-            ctx.fillText(glyph, x * squareSize + squareSize / 2, y * squareSize + squareSize / 2);
+
+            let x_fudge = 8;
+            let y_fudge = 13;
+            ctx.fillText(glyph, x * squareSize + x_fudge, y * squareSize + y_fudge);
           }
         }
 

style.css

@@ -1,3 +1,10 @@
+@font-face {
+  font-family: 'mononoki';
+  font-style: normal;
+  font-weight: 400;
+  src: local('mononoki'), url('fonts/mononoki-Regular.ttf') format('truetype');
+}
+
 canvas {
   background: black;
 }