diff --git a/gallery/static/fonts/font.css b/gallery/static/fonts/font.css
new file mode 100644
index 0000000..bb8f61b
--- /dev/null
+++ b/gallery/static/fonts/font.css
@@ -0,0 +1,7 @@
+@font-face {
+    font-family: 'Rubik';
+    src: url('./Rubik.ttf') format('truetype');
+    font-style: normal;
+    font-display: block;
+    font-weight: 300 900;
+}
\ No newline at end of file
diff --git a/gallery/static/sass/variables.sass b/gallery/static/sass/variables.sass
index 321a03d..537fab9 100644
--- a/gallery/static/sass/variables.sass
+++ b/gallery/static/sass/variables.sass
@@ -74,13 +74,3 @@ $breakpoint: 800px
 
     --breakpoint: 800px
 
-// I have no clue if its webassets or libsass thats doing this shit
-// But one of them is trying to "correct" the path, and 404-ing the
-// font, so enjoy this path fuckery
-
-@font-face
-    font-family: 'Rubik'
-    src: url('../../../../static/fonts/Rubik.ttf') format('truetype')
-    font-style: normal
-    font-display: swap
-    font-weight: 300 900
diff --git a/gallery/templates/layout.html b/gallery/templates/layout.html
index 56af76f..a739279 100644
--- a/gallery/templates/layout.html
+++ b/gallery/templates/layout.html
@@ -30,6 +30,11 @@
         type="image/svg+xml"
         media="(prefers-color-scheme: dark)"/>
 
+    <link
+        rel="prefetch"
+        href="{{url_for('static', filename='fonts/font.css')}}"
+        type="stylesheet"/>
+
     {% assets "scripts" %}
         <script type="text/javascript" src="{{ ASSET_URL }}"></script>
     {% endassets %}