diff --git a/assets/FiraCode-Bold.woff2 b/assets/FiraCode-Bold.woff2
new file mode 100644
index 0000000..349dc36
Binary files /dev/null and b/assets/FiraCode-Bold.woff2 differ
diff --git a/assets/FiraCode-Regular.woff2 b/assets/FiraCode-Regular.woff2
new file mode 100644
index 0000000..f8b63fb
Binary files /dev/null and b/assets/FiraCode-Regular.woff2 differ
diff --git a/src/firacode.css b/src/firacode.css
new file mode 100644
index 0000000..bd0ea0b
--- /dev/null
+++ b/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;
+}
\ No newline at end of file
diff --git a/src/partials/thecockpit.html b/src/partials/thecockpit.html
index a7a0b03..8e2fa83 100644
--- a/src/partials/thecockpit.html
+++ b/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') {
diff --git a/src/style.css b/src/style.css
index 51c40a9..7cb8bcd 100644
--- a/src/style.css
+++ b/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);
diff --git a/src/triangle.css b/src/triangle.css
index b37e99f..47d0cca 100644
--- a/src/triangle.css
+++ b/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);
diff --git a/thecockpit/ratzilla b/thecockpit/ratzilla
index c19f3f6..da35ead 160000
--- a/thecockpit/ratzilla
+++ b/thecockpit/ratzilla
@@ -1 +1 @@
-Subproject commit c19f3f64781eea425fb2a22f1b64520c2711f445
+Subproject commit da35ead8db4a224814f56eb6f86202e7ed261975
diff --git a/thecockpit/src/web/mod.rs b/thecockpit/src/web/mod.rs
index 1f0456c..8dfcb65 100644
--- a/thecockpit/src/web/mod.rs
+++ b/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 =
-        CanvasBackend::new_with_options(CanvasBackendOptions::new().grid_id(grid_id)).unwrap();
+    let backend = CanvasBackend::new_with_options(
+        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()));