diff --git a/frontend/package.json b/frontend/package.json
index bbc1da87f..4388fdb6d 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -58,6 +58,7 @@
     "sass": "1.70.0",
     "subset-font": "2.3.0",
     "typescript": "5.5.4",
+    "unplugin-inject-preload": "3.0.0",
     "vite": "6.0.11",
     "vite-bundle-visualizer": "1.0.1",
     "vite-plugin-checker": "0.7.2",
diff --git a/frontend/src/html/head.html b/frontend/src/html/head.html
index 1514e6a30..5155db31a 100644
--- a/frontend/src/html/head.html
+++ b/frontend/src/html/head.html
@@ -1,4 +1,19 @@
 <head>
+  <link
+    rel="preload"
+    href="/webfonts/RobotoMono-Regular.woff2"
+    type="font/woff2"
+    as="font"
+    crossorigin
+  />
+  <link
+    rel="preload"
+    href="/webfonts/LexendDeca-Regular.woff2"
+    type="font/woff2"
+    as="font"
+    crossorigin
+  />
+
   <script>
     document.addEventListener("keydown", function (e) {
       if (e.key == "Escape") e.preventDefault();
@@ -89,7 +104,6 @@
   <meta name="twitter:card" content="summary_large_image" />
   <meta name="darkreader-lock" />
   <meta http-equiv="Cache-Control" content="no-store" />
-  <link rel="preload" href="styles/vendor.scss" as="style" />
   <link rel="stylesheet" href="styles/vendor.scss" />
   <link rel="stylesheet" href="styles/index.scss" />
 </head>
diff --git a/frontend/vite.config.prod.js b/frontend/vite.config.prod.js
index 73a2b425e..94850ecb7 100644
--- a/frontend/vite.config.prod.js
+++ b/frontend/vite.config.prod.js
@@ -8,6 +8,8 @@ import { splitVendorChunkPlugin } from "vite";
 import childProcess from "child_process";
 import { checker } from "vite-plugin-checker";
 import { writeFileSync } from "fs";
+// eslint-disable-next-line import/no-unresolved
+import UnpluginInjectPreload from "unplugin-inject-preload/vite";
 
 function pad(numbers, maxLength, fillString) {
   return numbers.map((number) =>
@@ -84,6 +86,7 @@ export default {
     splitVendorChunkPlugin(),
     VitePWA({
       // injectRegister: "networkfirst",
+      injectRegister: "script-defer",
       registerType: "autoUpdate",
       manifest: {
         short_name: "Monkeytype",
@@ -143,6 +146,29 @@ export default {
         },
       },
     ]),
+    UnpluginInjectPreload({
+      files: [
+        {
+          outputMatch: /css\/vendor.*\.css$/,
+          attributes: {
+            as: "style",
+            type: "text/css",
+            rel: "preload",
+            crossorigin: true,
+          },
+        },
+        {
+          outputMatch: /.*\.woff2$/,
+          attributes: {
+            as: "font",
+            type: "font/woff2",
+            rel: "preload",
+            crossorigin: true,
+          },
+        },
+      ],
+      injectTo: "head-prepend",
+    }),
   ],
   build: {
     emptyOutDir: true,
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index e2c1e279c..111b007c0 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -436,6 +436,9 @@ importers:
       typescript:
         specifier: 5.5.4
         version: 5.5.4
+      unplugin-inject-preload:
+        specifier: 3.0.0
+        version: 3.0.0
       vite:
         specifier: 6.0.11
         version: 6.0.11(@types/node@20.14.11)(sass@1.70.0)(terser@5.31.3)(tsx@4.16.2)(yaml@2.5.0)
@@ -3154,6 +3157,11 @@ packages:
     engines: {node: '>=0.4.0'}
     hasBin: true
 
+  acorn@8.14.0:
+    resolution: {integrity: sha512-cl669nCJTZBsL97OF4kUQm5g5hC2uihk0NxY3WENAC0TYdILVkAyHymAntgxGkl7K+t0cXIrH5siy5S4XkFycA==}
+    engines: {node: '>=0.4.0'}
+    hasBin: true
+
   add-stream@1.0.0:
     resolution: {integrity: sha512-qQLMr+8o0WC4FZGQTcJiKBVC59JylcPSrTtk6usvmIDFUOCKegapy1VHQwRbFMOFyb/inzUVqHs+eMYKDM1YeQ==}
 
@@ -6366,6 +6374,7 @@ packages:
 
   lodash.isequal@4.5.0:
     resolution: {integrity: sha512-pDo3lu8Jhfjqls6GkMgpahsF9kCyayhgykjyLMNFTKWrpVdAQtYyB4muAMWozBB4ig/dtWAmsMxLEI8wuz+DYQ==}
+    deprecated: This package is deprecated. Use require('node:util').isDeepStrictEqual instead.
 
   lodash.isfunction@3.0.9:
     resolution: {integrity: sha512-AirXNj15uRIMMPihnkInB4i3NHeb4iBtNg9WRWuK2o31S+ePwwNmDPaTL3o7dTJ+VXNZim7rFs4rxN4YU1oUJw==}
@@ -9147,6 +9156,19 @@ packages:
     resolution: {integrity: sha512-pjy2bYhSsufwWlKwPc+l3cN7+wuJlK6uz0YdJEOlQDbl6jo/YlPi4mb8agUkVC8BF7V8NuzeyPNqRksA3hztKQ==}
     engines: {node: '>= 0.8'}
 
+  unplugin-inject-preload@3.0.0:
+    resolution: {integrity: sha512-VwHhjdaGo/CISu5ZZhlN74n3ioUjYGgWBwVwzpQjiCybusZajbT+vsL88sxK/xkH5Ypn2QUc1FA01Ne8K6TJHQ==}
+    engines: {node: ^14.18.0 || >=16.0.0}
+    peerDependencies:
+      html-webpack-plugin: '>=5.0.0'
+    peerDependenciesMeta:
+      html-webpack-plugin:
+        optional: true
+
+  unplugin@1.16.1:
+    resolution: {integrity: sha512-4/u/j4FrCKdi17jaxuJA0jClGxB1AvU2hw/IuayPc4ay1XGaJs/rbb4v5WKwAjNifjmXK9PIFyuPiaK8azyR9w==}
+    engines: {node: '>=14.0.0'}
+
   unset-value@1.0.0:
     resolution: {integrity: sha512-PcA2tsuGSF9cnySLHTLSh2qrQiJ70mn+r+Glzxv2TWZblxsxCC52BDlZoPCsz7STd9pN7EZetkWZBAvk4cgZdQ==}
     engines: {node: '>=0.10.0'}
@@ -9500,6 +9522,13 @@ packages:
     resolution: {integrity: sha512-VwddBukDzu71offAQR975unBIGqfKZpM+8ZX6ySk8nYhVoo5CYaZyzt3YBvYtRtO+aoGlqxPg/B87NGVZ/fu6g==}
     engines: {node: '>=12'}
 
+  webpack-sources@3.2.3:
+    resolution: {integrity: sha512-/DyMEOrDgLKKIG0fmvtz+4dUX/3Ghozwgm6iPp8KRhvn+eQf9+Q7GWxVNMk3+uCPWfdXYC4ExGBckIXdFEfH1w==}
+    engines: {node: '>=10.13.0'}
+
+  webpack-virtual-modules@0.6.2:
+    resolution: {integrity: sha512-66/V2i5hQanC51vBQKPH4aI8NMAcBW59FVBs+rC7eGHupMyfn34q7rZIE+ETlJ+XTevqfUhVVBgSUNSW2flEUQ==}
+
   websocket-driver@0.7.4:
     resolution: {integrity: sha512-b17KeDIQVjvb0ssuSDF2cYXSg2iztliJ4B9WdsuB6J952qCPKmnVq4DyW5motImXHDC1cBT/1UezrJVsKw5zjg==}
     engines: {node: '>=0.8.0'}
@@ -12593,6 +12622,8 @@ snapshots:
 
   acorn@8.12.1: {}
 
+  acorn@8.14.0: {}
+
   add-stream@1.0.0: {}
 
   agent-base@6.0.2:
@@ -19817,6 +19848,17 @@ snapshots:
 
   unpipe@1.0.0: {}
 
+  unplugin-inject-preload@3.0.0:
+    dependencies:
+      mime-types: 2.1.35
+      unplugin: 1.16.1
+      webpack-sources: 3.2.3
+
+  unplugin@1.16.1:
+    dependencies:
+      acorn: 8.14.0
+      webpack-virtual-modules: 0.6.2
+
   unset-value@1.0.0:
     dependencies:
       has-value: 0.3.1
@@ -20264,6 +20306,10 @@ snapshots:
 
   webidl-conversions@7.0.0: {}
 
+  webpack-sources@3.2.3: {}
+
+  webpack-virtual-modules@0.6.2: {}
+
   websocket-driver@0.7.4:
     dependencies:
       http-parser-js: 0.5.8
