Attempt at fixing missing files

material/assets/fonts/roboto.css

+/* roboto-300 - latin */
+@font-face {
+  font-family: Roboto;
+  font-style: normal;
+  font-weight: 300;
+  src: url("roboto-v18-latin-300.eot"); /* IE9 Compat Modes */
+  src: local("Roboto Light"), local("Roboto-Light"),
+  url("roboto-v18-latin-300.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
+  url("roboto-v18-latin-300.woff2") format("woff2"), /* Super Modern Browsers */
+  url("roboto-v18-latin-300.woff") format("woff"), /* Modern Browsers */
+  url("roboto-v18-latin-300.ttf") format("truetype"), /* Safari, Android, iOS */
+  url("roboto-v18-latin-300.svg#Roboto") format("svg"); /* Legacy iOS */
+}
+
+/* roboto-regular - latin */
+@font-face {
+  font-family: Roboto;
+  font-style: normal;
+  font-weight: 400;
+  src: url("roboto-v18-latin-regular.eot"); /* IE9 Compat Modes */
+  src: local(Roboto), local("Roboto-Regular"),
+  url("roboto-v18-latin-regular.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
+  url("roboto-v18-latin-regular.woff2") format("woff2"), /* Super Modern Browsers */
+  url("roboto-v18-latin-regular.woff") format("woff"), /* Modern Browsers */
+  url("roboto-v18-latin-regular.ttf") format("truetype"), /* Safari, Android, iOS */
+  url("roboto-v18-latin-regular.svg#Roboto") format("svg"); /* Legacy iOS */
+}
+
+/* roboto-italic - latin */
+@font-face {
+  font-family: Roboto;
+  font-style: italic;
+  font-weight: 400;
+  src: url("roboto-v18-latin-italic.eot"); /* IE9 Compat Modes */
+  src: local("Roboto Italic"), local("Roboto-Italic"),
+  url("roboto-v18-latin-italic.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
+  url("roboto-v18-latin-italic.woff2") format("woff2"), /* Super Modern Browsers */
+  url("roboto-v18-latin-italic.woff") format("woff"), /* Modern Browsers */
+  url("roboto-v18-latin-italic.ttf") format("truetype"), /* Safari, Android, iOS */
+  url("roboto-v18-latin-italic.svg#Roboto") format("svg"); /* Legacy iOS */
+}
+
+/* roboto-700 - latin */
+@font-face {
+  font-family: Roboto;
+  font-style: normal;
+  font-weight: 700;
+  src: url("roboto-v18-latin-700.eot"); /* IE9 Compat Modes */
+  src: local("Roboto Bold"), local("Roboto-Bold"),
+  url("roboto-v18-latin-700.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
+  url("roboto-v18-latin-700.woff2") format("woff2"), /* Super Modern Browsers */
+  url("roboto-v18-latin-700.woff") format("woff"), /* Modern Browsers */
+  url("roboto-v18-latin-700.ttf") format("truetype"), /* Safari, Android, iOS */
+  url("roboto-v18-latin-700.svg#Roboto") format("svg"); /* Legacy iOS */
+}

material/base.html

@@ -57,8 +57,10 @@
       <script src="{{ base_url }}/assets/javascripts/modernizr.1aa3b519.js"></script>
     {% endblock %}
     {% block fonts %}
-      <link rel="stylesheet" href="{{ base_url }}/assets/stylesheets/fonts.css">
+      <link rel="stylesheet" href="{{ base_url }}/assets/fonts/roboto.css">
+      <link rel="stylesheet" href="{{ base_url }}/assets/fonts/roboto-mono.css">
       <style>body,input{font-family:Roboto,"Helvetica Neue",Helvetica,Arial,sans-serif}code,kbd,pre{font-family:"Roboto Mono","Courier New",Courier,monospace}</style>
+      <link rel="stylesheet" href="{{ base_url }}/assets/fonts/MaterialIcons.css">
     {% endblock %}
     {% for path in extra_css %}
       <link rel="stylesheet" href="{{ path }}">

src/assets/fonts/MaterialIcons.css

+@font-face {
+  font-family: "Material Icons";
+  font-style: normal;
+  font-weight: 400;
+  src: url("MaterialIcons-Regular.eot"); /* For IE6-8 */
+  src: local("Material Icons"), local("MaterialIcons-Regular"),
+  url("MaterialIcons-Regular.woff2") format("woff2"),
+  url("MaterialIcons-Regular.woff") format("woff"),
+  url("MaterialIcons-Regular.ttf") format("truetype");
+}
+
+.material-icons {
+  display: inline-block;
+  font-family: "Material Icons", sans-serif;
+  font-size: 1.5rem; /* Preferred icon size */
+
+  /* Support for Firefox. */
+  -moz-osx-font-smoothing: grayscale;
+
+  /* Support for all WebKit browsers. */
+  -webkit-font-smoothing: antialiased;
+  font-style: normal;
+  font-weight: 400;
+  letter-spacing: normal;
+  line-height: 1;
+
+  /* Support for Safari and Chrome. */
+  text-rendering: optimizeLegibility;
+  text-transform: none;
+  word-wrap: normal;
+  white-space: nowrap;
+  direction: ltr;
+
+  /* Support for IE. */
+  font-feature-settings: "liga";
+}

src/assets/fonts/roboto-mono.css

+/* roboto-mono-regular - latin */
+@font-face {
+  font-family: "Roboto Mono";
+  font-style: normal;
+  font-weight: 400;
+  src: url("roboto-mono-v5-latin-regular.eot"); /* IE9 Compat Modes */
+  src: local("Roboto Mono"), local("RobotoMono-Regular"),
+  url("roboto-mono-v5-latin-regular.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
+  url("roboto-mono-v5-latin-regular.woff2") format("woff2"), /* Super Modern Browsers */
+  url("roboto-mono-v5-latin-regular.woff") format("woff"), /* Modern Browsers */
+  url("roboto-mono-v5-latin-regular.ttf") format("truetype"), /* Safari, Android, iOS */
+  url("roboto-mono-v5-latin-regular.svg#RobotoMono") format("svg"); /* Legacy iOS */
+}

src/assets/fonts/roboto.css

+/* roboto-300 - latin */
+@font-face {
+  font-family: Roboto;
+  font-style: normal;
+  font-weight: 300;
+  src: url("roboto-v18-latin-300.eot"); /* IE9 Compat Modes */
+  src: local("Roboto Light"), local("Roboto-Light"),
+  url("roboto-v18-latin-300.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
+  url("roboto-v18-latin-300.woff2") format("woff2"), /* Super Modern Browsers */
+  url("roboto-v18-latin-300.woff") format("woff"), /* Modern Browsers */
+  url("roboto-v18-latin-300.ttf") format("truetype"), /* Safari, Android, iOS */
+  url("roboto-v18-latin-300.svg#Roboto") format("svg"); /* Legacy iOS */
+}
+
+/* roboto-regular - latin */
+@font-face {
+  font-family: Roboto;
+  font-style: normal;
+  font-weight: 400;
+  src: url("roboto-v18-latin-regular.eot"); /* IE9 Compat Modes */
+  src: local(Roboto), local("Roboto-Regular"),
+  url("roboto-v18-latin-regular.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
+  url("roboto-v18-latin-regular.woff2") format("woff2"), /* Super Modern Browsers */
+  url("roboto-v18-latin-regular.woff") format("woff"), /* Modern Browsers */
+  url("roboto-v18-latin-regular.ttf") format("truetype"), /* Safari, Android, iOS */
+  url("roboto-v18-latin-regular.svg#Roboto") format("svg"); /* Legacy iOS */
+}
+
+/* roboto-italic - latin */
+@font-face {
+  font-family: Roboto;
+  font-style: italic;
+  font-weight: 400;
+  src: url("roboto-v18-latin-italic.eot"); /* IE9 Compat Modes */
+  src: local("Roboto Italic"), local("Roboto-Italic"),
+  url("roboto-v18-latin-italic.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
+  url("roboto-v18-latin-italic.woff2") format("woff2"), /* Super Modern Browsers */
+  url("roboto-v18-latin-italic.woff") format("woff"), /* Modern Browsers */
+  url("roboto-v18-latin-italic.ttf") format("truetype"), /* Safari, Android, iOS */
+  url("roboto-v18-latin-italic.svg#Roboto") format("svg"); /* Legacy iOS */
+}
+
+/* roboto-700 - latin */
+@font-face {
+  font-family: Roboto;
+  font-style: normal;
+  font-weight: 700;
+  src: url("roboto-v18-latin-700.eot"); /* IE9 Compat Modes */
+  src: local("Roboto Bold"), local("Roboto-Bold"),
+  url("roboto-v18-latin-700.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
+  url("roboto-v18-latin-700.woff2") format("woff2"), /* Super Modern Browsers */
+  url("roboto-v18-latin-700.woff") format("woff"), /* Modern Browsers */
+  url("roboto-v18-latin-700.ttf") format("truetype"), /* Safari, Android, iOS */
+  url("roboto-v18-latin-700.svg#Roboto") format("svg"); /* Legacy iOS */
+}

src/assets/stylesheets/fonts.sass

-/* roboto-300 - latin */
-@font-face
-  font-family: 'Roboto'
-  font-style: normal
-  font-weight: 300
-  src: url('../fonts/roboto-v18-latin-300.eot') /* IE9 Compat Modes */
-  src: local('Roboto Light'), local('Roboto-Light'),
-  url('../fonts/roboto-v18-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
-  url('../fonts/roboto-v18-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
-  url('../fonts/roboto-v18-latin-300.woff') format('woff'), /* Modern Browsers */
-  url('../fonts/roboto-v18-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
-  url('../fonts/roboto-v18-latin-300.svg#Roboto') format('svg') /* Legacy iOS */
-
-
-/* roboto-regular - latin */
-@font-face
-  font-family: 'Roboto'
-  font-style: normal
-  font-weight: 400
-  src: url('../fonts/roboto-v18-latin-regular.eot') /* IE9 Compat Modes */
-  src: local('Roboto'), local('Roboto-Regular'),
-  url('../fonts/roboto-v18-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
-  url('../fonts/roboto-v18-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
-  url('../fonts/roboto-v18-latin-regular.woff') format('woff'), /* Modern Browsers */
-  url('../fonts/roboto-v18-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
-  url('../fonts/roboto-v18-latin-regular.svg#Roboto') format('svg') /* Legacy iOS */
-
-
-/* roboto-italic - latin */
-@font-face
-  font-family: 'Roboto'
-  font-style: italic
-  font-weight: 400
-  src: url('../fonts/roboto-v18-latin-italic.eot') /* IE9 Compat Modes */
-  src: local('Roboto Italic'), local('Roboto-Italic'),
-  url('../fonts/roboto-v18-latin-italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
-  url('../fonts/roboto-v18-latin-italic.woff2') format('woff2'), /* Super Modern Browsers */
-  url('../fonts/roboto-v18-latin-italic.woff') format('woff'), /* Modern Browsers */
-  url('../fonts/roboto-v18-latin-italic.ttf') format('truetype'), /* Safari, Android, iOS */
-  url('../fonts/roboto-v18-latin-italic.svg#Roboto') format('svg') /* Legacy iOS */
-
-
-/* roboto-700 - latin */
-@font-face
-  font-family: 'Roboto'
-  font-style: normal
-  font-weight: 700
-  src: url('../fonts/roboto-v18-latin-700.eot') /* IE9 Compat Modes */
-  src: local('Roboto Bold'), local('Roboto-Bold'),
-  url('../fonts/roboto-v18-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
-  url('../fonts/roboto-v18-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
-  url('../fonts/roboto-v18-latin-700.woff') format('woff'), /* Modern Browsers */
-  url('../fonts/roboto-v18-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
-  url('../fonts/roboto-v18-latin-700.svg#Roboto') format('svg') /* Legacy iOS */
-
-
-/* roboto-mono-regular - latin */
-@font-face
-  font-family: 'Roboto Mono'
-  font-style: normal
-  font-weight: 400
-  src: url('../fonts/roboto-mono-v5-latin-regular.eot') /* IE9 Compat Modes */
-  src: local('Roboto Mono'), local('RobotoMono-Regular'),
-  url('../fonts/roboto-mono-v5-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
-  url('../fonts/roboto-mono-v5-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
-  url('../fonts/roboto-mono-v5-latin-regular.woff') format('woff'), /* Modern Browsers */
-  url('../fonts/roboto-mono-v5-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
-  url('../fonts/roboto-mono-v5-latin-regular.svg#RobotoMono') format('svg') /* Legacy iOS */
-
-@font-face
-  font-family: 'Material Icons'
-  font-style: normal
-  font-weight: 400
-  src: url('../fonts/MaterialIcons-Regular.eot') /* For IE6-8 */
-  src: local('Material Icons'), local('MaterialIcons-Regular'),
-  url('../fonts/MaterialIcons-Regular.woff2') format('woff2'),
-  url('../fonts/MaterialIcons-Regular.woff') format('woff'),
-  url('../fonts/MaterialIcons-Regular.ttf') format('truetype')
-
-.material-icons
-  font-family: 'Material Icons'
-  font-weight: normal
-  font-style: normal
-  font-size: 24px  /* Preferred icon size */
-  display: inline-block
-  line-height: 1
-  text-transform: none
-  letter-spacing: normal
-  word-wrap: normal
-  white-space: nowrap
-  direction: ltr
-
-  /* Support for all WebKit browsers. */
-  -webkit-font-smoothing: antialiased
-  /* Support for Safari and Chrome. */
-  text-rendering: optimizeLegibility
-
-  /* Support for Firefox. */
-  -moz-osx-font-smoothing: grayscale
-
-  /* Support for IE. */
-  font-feature-settings: 'liga'

src/base.html

@@ -115,10 +115,11 @@
 
     <!-- Webfonts -->
     {% block fonts %}
-      <link rel="stylesheet" type="text/css" href="{{ base_url }}/assets/stylesheets/fonts.css" />
+      <link rel="stylesheet" type="text/css" href="{{ base_url }}/assets/fonts/roboto.css" />
+      <link rel="stylesheet" type="text/css" href="{{ base_url }}/assets/fonts/roboto-mono.css" />
       <style>
         body, input {
-          font-family: "Roboto", "Helvetica Neue",
+          font-family: Roboto, "Helvetica Neue",
             Helvetica, Arial, sans-serif;
         }
         pre, code, kbd {
@@ -126,6 +127,7 @@
             Courier, monospace;
         }
       </style>
+      <link rel="stylesheet" type="text/css" href="{{ base_url }}/assets/fonts/MaterialIcons.css" />
     {% endblock %}
 
     <!-- Custom stylesheets -->

webpack.config.js

@@ -128,6 +128,12 @@ module.exports = env => {
           from: "assets/images/*.{ico,png}"
         },
 
+        /* Copy fonts without cache busting */
+        {
+          context: "src",
+          from: "assets/fonts/*.{css,eot,svg,ttf,woff,woff2}"
+        },
+
         /* Copy configuration */
         {
           context: "src",