Put webfonts into separate template block and init fonts

material/base.html

@@ -32,14 +32,11 @@
     {% block libs %}
       <script src="{{ base_url }}/assets/javascripts/modernizr-934476c231.js"></script>
     {% endblock %}
+    {% block webfonts %}
+      {% include "partials/webfonts.html" %}
+    {% endblock %}
     {% block styles %}
-      <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,400i,700">
+      <link rel="stylesheet" href="{{ base_url }}/assets/stylesheets/application-dd5a9fb539.css">
-      <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto+Mono:400">
-      <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
-      {% if config.extra.social %}
-        <link rel="stylesheet" href="https://file.myfontastic.com/n6vo44Re5QaWo8oCKShBs7/icons.css">
-      {% endif %}
-      <link rel="stylesheet" href="{{ base_url }}/assets/stylesheets/application-15e6cafc7f.css">
       {% if config.extra.palette %}
         <link rel="stylesheet" href="{{ base_url }}/assets/stylesheets/application-535e87ca3f.palette.css">
       {% endif %}
@@ -146,7 +143,7 @@
         Array.prototype.map.call(links, function(item) {
           if (item.host != document.location.host) {
             item.addEventListener("click", function() {
-              var action = item.getAttribute("data-action") || "follow";
+              var action = item.getAttribute("data-md-action") || "follow";
               ga("send", "event", "outbound", action, item.href);
             });
           }

material/partials/webfonts.html

@@ -0,0 +1,18 @@
+{% if config.extra.font != "none" %}
+  {% set text = config.extra.get("font", {}).text | default("Roboto") %}
+  {% set code = config.extra.get("font", {}).code | default("Roboto Mono") %}
+  {% set font = text + ':300,400,400i,700|' + code | replace(' ', '+') %}
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family={{ font }}">
+  <style>
+    body, input {
+      font-family: "{{ text }}", "Helvetica Neue", Helvetica, Arial, sans-serif;
+    }
+    pre, code, kbd {
+      font-family: "{{ code }}", "Courier New", Courier, monospace;
+    }
+  </style>
+{% endif %}
+<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
+{% if config.extra.social %}
+  <link rel="stylesheet" href="https://file.myfontastic.com/n6vo44Re5QaWo8oCKShBs7/icons.css">
+{% endif %}

src/assets/stylesheets/base/_typeset.scss

@@ -28,7 +28,7 @@
 body,
 input {
   color: $md-color-black;
-  font-family: "Roboto", Helvetica, Arial, sans-serif;
+  // font-family: "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;
   font-weight: 400;
   font-feature-settings: "kern", "onum", "liga";
 
@@ -47,7 +47,7 @@ pre,
 code,
 kbd {
   color: $md-color-black;
-  font-family: "Roboto Mono", "Courier New", Courier, monospace;
+  // font-family: "Roboto Mono", "Courier New", Courier, monospace;
   font-weight: 400;
   font-feature-settings: "kern", "onum", "liga";
 

src/assets/stylesheets/layout/_footer.scss

@@ -47,7 +47,7 @@
 
   // Links to previous and next page
   &__link {
-    padding-top: 4.8rem;
+    padding-top: 2.8rem;
     padding-bottom: 0.8rem;
     transition: opacity 0.25s;
 

src/base.html

@@ -73,20 +73,13 @@
       <script src="{{ base_url }}/assets/javascripts/modernizr.js"></script>
     {% endblock %}
 
-    <!-- Block: webfonts and stylesheets -->
+    <!-- Block: webfonts -->
-    {% block styles %}
+    {% block webfonts %}
-      <link rel="stylesheet" type="text/css"
+      {% include "partials/webfonts.html" %}
-          href="https://fonts.googleapis.com/css?family=Roboto:300,400,400i,700" />
+    {% endblock %}
-      <link rel="stylesheet" type="text/css"
-          href="https://fonts.googleapis.com/css?family=Roboto+Mono:400" />
-      <link rel="stylesheet" type="text/css"
-          href="https://fonts.googleapis.com/icon?family=Material+Icons" />
 
-      <!-- Social icon webfont, if necessary -->
+    <!-- Block: stylesheets -->
-      {% if config.extra.social %}
+    {% block styles %}
-        <link rel="stylesheet" type="text/css"
-            href="https://file.myfontastic.com/n6vo44Re5QaWo8oCKShBs7/icons.css">
-      {% endif %}
 
       <!-- Theme-related stylesheets -->
       <link rel="stylesheet" type="text/css"
@@ -253,7 +246,7 @@
         Array.prototype.map.call(links, function(item) {
           if (item.host != document.location.host) {
             item.addEventListener("click", function() {
-              var action = item.getAttribute("data-action") || "follow";
+              var action = item.getAttribute("data-md-action") || "follow";
               ga("send", "event", "outbound", action, item.href);
             });
           }

src/partials/webfonts.html

@@ -0,0 +1,48 @@
+<!--
+  Copyright (c) 2016 Martin Donath <martin.donath@squidfunk.com>
+
+  Permission is hereby granted, free of charge, to any person obtaining a copy
+  of this software and associated documentation files (the "Software"), to
+  deal in the Software without restriction, including without limitation the
+  rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
+  sell copies of the Software, and to permit persons to whom the Software is
+  furnished to do so, subject to the following conditions:
+
+  The above copyright notice and this permission notice shall be included in
+  all copies or substantial portions of the Software.
+
+  THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+  IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+  FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT. IN NO EVENT SHALL THE
+  AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+  LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+  FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
+  IN THE SOFTWARE.
+-->
+
+<!-- Proportional and monospaced fonts -->
+{% if config.extra.font != "none" %}
+  {% set text = config.extra.get("font", {}).text | default("Roboto") %}
+  {% set code = config.extra.get("font", {}).code | default("Roboto Mono") %}
+  {% set font = text + ':300,400,400i,700|' + code | replace(' ', '+') %}
+  <link rel="stylesheet" type="text/css"
+    href="https://fonts.googleapis.com/css?family={{ font }}" />
+  <style>
+    body, input {
+      font-family: "{{ text }}", "Helvetica Neue", Helvetica, Arial, sans-serif;
+    }
+    pre, code, kbd {
+      font-family: "{{ code }}", "Courier New", Courier, monospace;
+    }
+  </style>
+{% endif %}
+
+<!-- Material icons as a default iconset -->
+<link rel="stylesheet" type="text/css"
+    href="https://fonts.googleapis.com/icon?family=Material+Icons" />
+
+<!-- Social icon webfont, if necessary -->
+{% if config.extra.social %}
+  <link rel="stylesheet" type="text/css"
+      href="https://file.myfontastic.com/n6vo44Re5QaWo8oCKShBs7/icons.css">
+{% endif %}