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
 
@@ -247,23 +246,3 @@ dd
     margin: 0 .5em
   .current
     font-weight: bold
-
-/* Fonts
-
-/* 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")
-

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/assets/stylesheets/partials/_blue.sass

@@ -1,29 +0,0 @@
-// Used internally:
-
-$background_color: #0b61a4
-$module_border_color: #033e6b
-$module_background_color: #66a3d2
-
-$input_hover_border_color: #ff9200
-$input_focus_border_color: #fff
-
-$loud_button_background_color: #ff9200
-$loud_button_border_color: #ffad40
-$loud_button_color: #a65f00
-$loud_button_focus_border_color: #000
-
-// Used by Blueprint:
-
-$font_color: #fff
-
-$header_color: inherit
-
-$link_color: inherit
-$link_hover_color: inherit
-$link_focus_color: inherit
-$link_active_color: inherit
-$link_visited_color: inherit
-
-$error_color: inherit
-$error_bg_color: #e14f1c
-$error_border_color: #cd0a0a

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