Move font definitions into a separate CSS file, using ERB and not Sass

Just checking out what doing asset references in a non-Sass way is!

app/assets/stylesheets/_layout.sass

@@ -1,7 +1,6 @@
 @import "partials/icon"
 @import "partials/clean/constants"
 @import "partials/clean/mixins"
-@import fonts
 
 /* Reset
 

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" %>");
+}

app/assets/stylesheets/fonts.css.sass

@@ -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")

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"}