Use Fira Code for font

src/firacode.css

@@ -0,0 +1,15 @@
+@font-face {
+  font-family: 'Fira Code';
+  src: url('/assets/FiraCode-Bold.woff2') format('woff2');
+  font-weight: bold;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Fira Code';
+  src: url('/assets/FiraCode-Regular.woff2') format('woff2');
+  font-weight: normal;
+  font-style: normal;
+  font-display: swap;
+}

src/partials/thecockpit.html

@@ -8,6 +8,10 @@
   </x-section-head>
   <div id="cockpit-canvas" style="height: 80vh;  margin: 8px; background-color: #000;"></div>
 </x-tab.content>
+<push name="head">
+  <link rel="preload" href="/assets/FiraCode-Regular.woff2" as="font" type="font/woff2" crossorigin>
+  <link rel="preload" href="/assets/FiraCode-Bold.woff2" as="font" type="font/woff2" crossorigin>
+</push>
 <script>
   var interval = setInterval(function () {
     if (typeof window.run_cockpit === 'function') {

src/style.css

@@ -1,4 +1,5 @@
 @import 'apex.css';
+@import 'firacode.css';
 
 @custom-media --tablet only screen and (max-width: 1200px);
 @custom-media --phone only screen and (max-width: 800px);

src/triangle.css

@@ -1,4 +1,5 @@
 @import 'apex.css';
+@import 'firacode.css';
 
 @custom-media --tablet only screen and (max-width: 1200px);
 @custom-media --phone only screen and (max-width: 800px);

thecockpit/ratzilla

@@ -1 +1 @@
-Subproject commit c19f3f64781eea425fb2a22f1b64520c2711f445
+Subproject commit da35ead8db4a224814f56eb6f86202e7ed261975

thecockpit/src/web/mod.rs

@@ -23,8 +23,12 @@ extern "C" {
 pub fn run(grid_id: &str) {
     console_error_panic_hook::set_once();
 
-    let backend =
+    let backend = CanvasBackend::new_with_options(
-        CanvasBackend::new_with_options(CanvasBackendOptions::new().grid_id(grid_id)).unwrap();
+        CanvasBackendOptions::new()
+            .grid_id(grid_id)
+            .font(String::from("16px Fira Code")),
+    )
+    .unwrap();
     let terminal = Terminal::new(backend).unwrap();
 
     let app = Rc::new(RefCell::new(App::default()));