diff --git a/app/assets/stylesheets/_layout.sass b/app/assets/stylesheets/_layout.sass
index 6d19a32c..974e9413 100644
--- a/app/assets/stylesheets/_layout.sass
+++ b/app/assets/stylesheets/_layout.sass
@@ -1,7 +1,6 @@
 @import "partials/icon"
 @import "partials/clean/constants"
 @import "partials/clean/mixins"
-@import fonts
 
 /* Reset
 
diff --git a/app/assets/stylesheets/fonts.css.erb b/app/assets/stylesheets/fonts.css.erb
new file mode 100644
index 00000000..e29723bf
--- /dev/null
+++ b/app/assets/stylesheets/fonts.css.erb
@@ -0,0 +1,39 @@
+/* A font by Jos Buivenga (exljbris) -> www.exljbris.nl */
+@font-face {
+  font-family: Delicious;
+  src: local("Delicious"), url("<%= font_path "Delicious-Roman.otf" %>)");
+}
+
+@font-face {
+  font-family: Delicious;
+  font-weight: bold;
+  src: local("Delicious"), url("<%= font_path "Delicious-Bold.otf" %>");
+}
+
+@font-face {
+  font-family: Delicious;
+  font-style: italic;
+  src: local("Delicious"), url("<%= font_path "Delicious-Italic.otf" %>");
+}
+
+@font-face {
+  font-family: "Noto Sans";
+  src: local("Noto Sans"), url("<%= font_path "NotoSans-Variable.ttf" %>");
+}
+
+@font-face {
+  font-family: "Noto Sans";
+  font-style: italic;
+  src: local("Noto Sans"), url("<%= font_path "NotoSans-Italic-Variable.ttf" %>");
+}
+
+@font-face {
+  font-family: "Noto Serif";
+  src: local("Noto Serif"), url("<%= font_path "NotoSerif-Variable.ttf" %>");
+}
+
+@font-face {
+  font-family: "Noto Serif";
+  font-style: italic;
+  src: local("Noto Serif"), url("<%= font_path "NotoSerif-Italic-Variable.ttf" %>");
+}
diff --git a/app/assets/stylesheets/fonts.css.sass b/app/assets/stylesheets/fonts.css.sass
deleted file mode 100644
index 67e0063e..00000000
--- a/app/assets/stylesheets/fonts.css.sass
+++ /dev/null
@@ -1,32 +0,0 @@
-/* A font by Jos Buivenga (exljbris) -> www.exljbris.nl
-@font-face
-  font-family: Delicious
-  src: local("Delicious"), font-url("Delicious-Roman.otf")
-
-@font-face
-  font-family: Delicious
-  font-weight: bold
-  src: local("Delicious"), font-url("Delicious-Bold.otf")
-
-@font-face
-  font-family: Delicious
-  font-style: italic
-  src: local("Delicious"), font-url("Delicious-Italic.otf")
-
-@font-face
-  font-family: "Noto Sans"
-  src: local("Noto Sans"), font-url("NotoSans-Variable.ttf")
-
-@font-face
-  font-family: "Noto Sans"
-  font-style: italic
-  src: local("Noto Sans"), font-url("NotoSans-Italic-Variable.ttf")
-
-@font-face
-  font-family: "Noto Serif"
-  src: local("Noto Serif"), font-url("NotoSerif-Variable.ttf")
-
-@font-face
-  font-family: "Noto Serif"
-  font-style: italic
-  src: local("Noto Serif"), font-url("NotoSerif-Italic-Variable.ttf")
diff --git a/app/views/layouts/application.html.haml b/app/views/layouts/application.html.haml
index ffbf5372..1164ed92 100644
--- a/app/views/layouts/application.html.haml
+++ b/app/views/layouts/application.html.haml
@@ -12,6 +12,7 @@
         #{t 'app_name'}: #{t '.title_tagline'}
     %link{href: image_path('favicon.png'), rel: 'icon'}
     = stylesheet_link_tag "application"
+    = stylesheet_link_tag "fonts"
     = yield :stylesheets
     - if use_responsive_design?
       %meta{name: "viewport", content: "width=device-width, initial-scale=1"}