Improved CSS font-family variables

material/base.html

@@ -34,7 +34,7 @@
       {% endif %}
     {% endblock %}
     {% block styles %}
-      <link rel="stylesheet" href="{{ 'assets/stylesheets/main.03d4cea5.min.css' | url }}">
+      <link rel="stylesheet" href="{{ 'assets/stylesheets/main.75e88914.min.css' | url }}">
       {% if config.theme.palette %}
         {% set palette = config.theme.palette %}
         <link rel="stylesheet" href="{{ 'assets/stylesheets/palette.9204c3b2.min.css' | url }}">
@@ -56,7 +56,7 @@
             font.text | replace(' ', '+') + ':300,400,400i,700%7C' +
             font.code | replace(' ', '+')
           }}&display=fallback">
-        <style>:root{--md-text-font-family:"{{ font.text }}";--md-code-font-family:"{{ font.code }}"}</style>
+        <style>:root{--md-text-font:"{{ font.text }}";--md-code-font:"{{ font.code }}"}</style>
       {% endif %}
     {% endblock %}
     {% for path in config["extra_css"] %}

src/assets/stylesheets/main/_typeset.scss

@@ -28,6 +28,16 @@
 body {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
+
+  // Font with fallback for body copy
+  --md-text-font-family:
+    var(--md-text-font, _),
+    -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;
+
+  // Font with fallback for code
+  --md-code-font-family:
+    var(--md-code-font, _),
+    SFMono-Regular, Consolas, Menlo, monospace;
 }
 
 // Define default fonts
@@ -35,9 +45,7 @@ body,
 input {
   color: var(--md-typeset-color);
   font-feature-settings: "kern", "liga";
-  font-family:
+  font-family: var(--md-text-font-family);
-    var(--md-text-font-family, _),
-    -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;
 }
 
 // Define monospaced fonts
@@ -46,9 +54,7 @@ pre,
 kbd {
   color: var(--md-typeset-color);
   font-feature-settings: "kern";
-  font-family:
+  font-family: var(--md-code-font-family);
-    var(--md-code-font-family, _),
-    SFMono-Regular, Consolas, Menlo, monospace;
 }
 
 // ----------------------------------------------------------------------------

src/base.html

@@ -113,8 +113,8 @@
         />
         <style>
           :root {
-            --md-text-font-family: "{{ font.text }}";
+            --md-text-font: "{{ font.text }}";
-            --md-code-font-family: "{{ font.code }}";
+            --md-code-font: "{{ font.code }}";
           }
         </style>
       {% endif %}