diff --git a/src/firacode.css b/src/firacode.css
deleted file mode 100644
index bd0ea0b..0000000
--- a/src/firacode.css
+++ /dev/null
@@ -1,15 +0,0 @@
-@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 8e2fa83..68b8b6a 100644
--- a/src/partials/thecockpit.html
+++ b/src/partials/thecockpit.html
@@ -8,15 +8,17 @@
   </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') {
-      clearInterval(interval);
-      window.run_cockpit();
-    }
-  }, 100);
+<script type="module">
+  const firaCodeFace = new FontFace('Fira Code', `url(${new URL('/assets/FiraCode-Regular.woff2', import.meta.url)})`, {style: "normal", weight: "normal"});
+  const firaCodeBoldFace = new FontFace('Fira Code', `url(${new URL('/assets/FiraCode-Bold.woff2', import.meta.url)})`, {style: "normal", weight: "bold"});
+  Promise.all([firaCodeFace.load(), firaCodeBoldFace.load()]).then((faces) => {
+    document.fonts.add(faces[0]);
+    document.fonts.add(faces[1]);
+    var interval = setInterval(function () {
+      if (typeof window.runCockpit === 'function') {
+        clearInterval(interval);
+        window.runCockpit();
+      }
+    }, 50);
+  });
 </script>
\ No newline at end of file
diff --git a/src/style.css b/src/style.css
index 7cb8bcd..51c40a9 100644
--- a/src/style.css
+++ b/src/style.css
@@ -1,5 +1,4 @@
 @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/thecockpit.js b/src/thecockpit.js
index 848b234..cec4e15 100644
--- a/src/thecockpit.js
+++ b/src/thecockpit.js
@@ -1,5 +1,5 @@
 import { default as init, run } from 'thecockpit'
-window.run_cockpit = async () => {
+window.runCockpit = async () => {
   await init();
   run("cockpit-canvas");
 };
diff --git a/src/triangle.css b/src/triangle.css
index 47d0cca..b37e99f 100644
--- a/src/triangle.css
+++ b/src/triangle.css
@@ -1,5 +1,4 @@
 @import 'apex.css';
-@import 'firacode.css';
 
 @custom-media --tablet only screen and (max-width: 1200px);
 @custom-media --phone only screen and (max-width: 800px);