diff --git a/app/javascript/styles/fonts/montserrat.scss b/app/javascript/styles/fonts/montserrat.scss
index 206f1865e5e..3d2b5a93f21 100644
--- a/app/javascript/styles/fonts/montserrat.scss
+++ b/app/javascript/styles/fonts/montserrat.scss
@@ -1,9 +1,9 @@
 @font-face {
   font-family: 'mastodon-font-display';
   src: local('Montserrat'),
-    url('../fonts/montserrat/Montserrat-Regular.woff2') format('woff2'),
-    url('../fonts/montserrat/Montserrat-Regular.woff') format('woff'),
-    url('../fonts/montserrat/Montserrat-Regular.ttf') format('truetype');
+    url('~fonts/montserrat/Montserrat-Regular.woff2') format('woff2'),
+    url('~fonts/montserrat/Montserrat-Regular.woff') format('woff'),
+    url('~fonts/montserrat/Montserrat-Regular.ttf') format('truetype');
   font-weight: 400;
   font-style: normal;
 }
@@ -11,7 +11,7 @@
 @font-face {
   font-family: 'mastodon-font-display';
   src: local('Montserrat'),
-    url('../fonts/montserrat/Montserrat-Medium.ttf') format('truetype');
+    url('~fonts/montserrat/Montserrat-Medium.ttf') format('truetype');
   font-weight: 500;
   font-style: normal;
 }
diff --git a/app/javascript/styles/fonts/roboto-mono.scss b/app/javascript/styles/fonts/roboto-mono.scss
index 2a1f74e1631..c793aa6edc3 100644
--- a/app/javascript/styles/fonts/roboto-mono.scss
+++ b/app/javascript/styles/fonts/roboto-mono.scss
@@ -1,10 +1,10 @@
 @font-face {
   font-family: 'mastodon-font-monospace';
   src: local('Roboto Mono'),
-    url('../fonts/roboto-mono/robotomono-regular-webfont.woff2') format('woff2'),
-    url('../fonts/roboto-mono/robotomono-regular-webfont.woff') format('woff'),
-    url('../fonts/roboto-mono/robotomono-regular-webfont.ttf') format('truetype'),
-    url('../fonts/roboto-mono/robotomono-regular-webfont.svg#roboto_monoregular') format('svg');
+    url('~fonts/roboto-mono/robotomono-regular-webfont.woff2') format('woff2'),
+    url('~fonts/roboto-mono/robotomono-regular-webfont.woff') format('woff'),
+    url('~fonts/roboto-mono/robotomono-regular-webfont.ttf') format('truetype'),
+    url('~fonts/roboto-mono/robotomono-regular-webfont.svg#roboto_monoregular') format('svg');
   font-weight: 400;
   font-style: normal;
 }
diff --git a/app/javascript/styles/fonts/roboto.scss b/app/javascript/styles/fonts/roboto.scss
index 345d9ad50e2..79034c018f8 100644
--- a/app/javascript/styles/fonts/roboto.scss
+++ b/app/javascript/styles/fonts/roboto.scss
@@ -1,10 +1,10 @@
 @font-face {
   font-family: 'mastodon-font-sans-serif';
   src: local('Roboto'),
-    url('../fonts/roboto/roboto-italic-webfont.woff2') format('woff2'),
-    url('../fonts/roboto/roboto-italic-webfont.woff') format('woff'),
-    url('../fonts/roboto/roboto-italic-webfont.ttf') format('truetype'),
-    url('../fonts/roboto/roboto-italic-webfont.svg#roboto-italic-webfont') format('svg');
+    url('~fonts/roboto/roboto-italic-webfont.woff2') format('woff2'),
+    url('~fonts/roboto/roboto-italic-webfont.woff') format('woff'),
+    url('~fonts/roboto/roboto-italic-webfont.ttf') format('truetype'),
+    url('~fonts/roboto/roboto-italic-webfont.svg#roboto-italic-webfont') format('svg');
   font-weight: normal;
   font-style: italic;
 }
@@ -12,10 +12,10 @@
 @font-face {
   font-family: 'mastodon-font-sans-serif';
   src: local('Roboto'),
-    url('../fonts/roboto/roboto-bold-webfont.woff2') format('woff2'),
-    url('../fonts/roboto/roboto-bold-webfont.woff') format('woff'),
-    url('../fonts/roboto/roboto-bold-webfont.ttf') format('truetype'),
-    url('../fonts/roboto/roboto-bold-webfont.svg#roboto-bold-webfont') format('svg');
+    url('~fonts/roboto/roboto-bold-webfont.woff2') format('woff2'),
+    url('~fonts/roboto/roboto-bold-webfont.woff') format('woff'),
+    url('~fonts/roboto/roboto-bold-webfont.ttf') format('truetype'),
+    url('~fonts/roboto/roboto-bold-webfont.svg#roboto-bold-webfont') format('svg');
   font-weight: bold;
   font-style: normal;
 }
@@ -23,10 +23,10 @@
 @font-face {
   font-family: 'mastodon-font-sans-serif';
   src: local('Roboto'),
-    url('../fonts/roboto/roboto-medium-webfont.woff2') format('woff2'),
-    url('../fonts/roboto/roboto-medium-webfont.woff') format('woff'),
-    url('../fonts/roboto/roboto-medium-webfont.ttf') format('truetype'),
-    url('../fonts/roboto/roboto-medium-webfont.svg#roboto-medium-webfont') format('svg');
+    url('~fonts/roboto/roboto-medium-webfont.woff2') format('woff2'),
+    url('~fonts/roboto/roboto-medium-webfont.woff') format('woff'),
+    url('~fonts/roboto/roboto-medium-webfont.ttf') format('truetype'),
+    url('~fonts/roboto/roboto-medium-webfont.svg#roboto-medium-webfont') format('svg');
   font-weight: 500;
   font-style: normal;
 }
@@ -34,10 +34,10 @@
 @font-face {
   font-family: 'mastodon-font-sans-serif';
   src: local('Roboto'),
-    url('../fonts/roboto/roboto-regular-webfont.woff2') format('woff2'),
-    url('../fonts/roboto/roboto-regular-webfont.woff') format('woff'),
-    url('../fonts/roboto/roboto-regular-webfont.ttf') format('truetype'),
-    url('../fonts/roboto/roboto-regular-webfont.svg#roboto-regular-webfont') format('svg');
+    url('~fonts/roboto/roboto-regular-webfont.woff2') format('woff2'),
+    url('~fonts/roboto/roboto-regular-webfont.woff') format('woff'),
+    url('~fonts/roboto/roboto-regular-webfont.ttf') format('truetype'),
+    url('~fonts/roboto/roboto-regular-webfont.svg#roboto-regular-webfont') format('svg');
   font-weight: normal;
   font-style: normal;
 }