Adding ability to async in extra CSS

Author: Matt Gaunt

server/layouts/app-shell.handlebars

@@ -110,6 +110,42 @@ limitations under the License.
     </svg>
   </div>
 
+  {{#if remoteStyles}}
+  <script>
+    var remoteStyles = [
+      {{#each remoteStyles}}
+      '{{this}}',
+      {{~/each}}
+    ];
+
+    // <3 to Paul Irish
+    // http://www.paulirish.com/2011/requestanimationframe-for-smart-animating/
+    var requestAnimFrame = (function(){
+      return  window.requestAnimationFrame       ||
+          window.webkitRequestAnimationFrame ||
+          window.mozRequestAnimationFrame    ||
+          function( callback ){
+            window.setTimeout(callback, 1000 / 60);
+          };
+    })();
+
+    // Asynchronously load CSS with a Request Animation Frame
+    requestAnimFrame(function() {
+      var elementToInsertLinkBefore =
+        document.getElementsByTagName('script')[0];
+      for (var i = 0; i < remoteStyles.length; i++) {
+        var linkElement = document.createElement('link');
+        linkElement.rel = 'stylesheet';
+        linkElement.media = 'all';
+        linkElement.href = remoteStyles[i];
+
+        elementToInsertLinkBefore.parentNode.insertBefore(linkElement,
+          elementToInsertLinkBefore);
+      }
+    });
+  </script>
+  {{~/if}}
+  
   {{#each remoteScripts}}
   <script src="{{this}}" async></script>
   {{~/each}}

server/layouts/default.handlebars

@@ -61,6 +61,42 @@ limitations under the License.
     </div>
   </section>
 
+  {{#if remoteStyles}}
+  <script>
+    var remoteStyles = [
+      {{#each remoteStyles}}
+      '{{this}}',
+      {{~/each}}
+    ];
+
+    // <3 to Paul Irish
+    // http://www.paulirish.com/2011/requestanimationframe-for-smart-animating/
+    var requestAnimFrame = (function(){
+      return  window.requestAnimationFrame       ||
+          window.webkitRequestAnimationFrame ||
+          window.mozRequestAnimationFrame    ||
+          function( callback ){
+            window.setTimeout(callback, 1000 / 60);
+          };
+    })();
+
+    // Asynchronously load CSS with a Request Animation Frame
+    requestAnimFrame(function() {
+      var elementToInsertLinkBefore =
+        document.getElementsByTagName('script')[0];
+      for (var i = 0; i < remoteStyles.length; i++) {
+        var linkElement = document.createElement('link');
+        linkElement.rel = 'stylesheet';
+        linkElement.media = 'all';
+        linkElement.href = remoteStyles[i];
+
+        elementToInsertLinkBefore.parentNode.insertBefore(linkElement,
+          elementToInsertLinkBefore);
+      }
+    });
+  </script>
+  {{~/if}}
+
   {{#each remoteScripts}}
   <script src="{{this}}" async></script>
   {{~/each}}

server/models/path-config.js

@@ -5,21 +5,29 @@ var pathConfigs = {
   '/': {
     view: 'index',
     inlineStyles: getFileContents(['/styles/core.css']),
+    remoteStyles: ['https://fonts.googleapis.com/css?family=Roboto:' +
+      '400,300,700,500,400italic'],
     remoteScripts: ['/scripts/static-page.js']
   },
   '/url-1': {
     view: 'url-1',
     inlineStyles: getFileContents(['/styles/core.css']),
+    remoteStyles: ['https://fonts.googleapis.com/css?family=Roboto:' +
+      '400,300,700,500,400italic'],
     remoteScripts: ['/scripts/static-page.js']
   },
   '/url-2': {
     view: 'url-2',
     inlineStyles: getFileContents(['/styles/core.css']),
+    remoteStyles: ['https://fonts.googleapis.com/css?family=Roboto:' +
+      '400,300,700,500,400italic'],
     remoteScripts: ['/scripts/static-page.js']
   },
   '/app-shell': {
     view: '',
     inlineStyles: getFileContents(['/styles/core.css']),
+    remoteStyles: ['https://fonts.googleapis.com/css?family=Roboto:' +
+      '400,300,700,500,400italic'],
     remoteScripts: ['/scripts/core.js']
   }
 };

src/styles/core/_core.scss

@@ -24,8 +24,10 @@ html, body {
   margin: 0;
   height: 100%;
   width: 100%;
-  font-family: 'Roboto';
+  font-family: 'Helvetica', 'Verdana', sans-serif;
   font-weight: 400;
+  // Not implemented yet but is a nice solution for async loading fonts
+  font-display: optional;
   color: #444;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
@@ -59,6 +61,10 @@ body:after {
   transition: opacity 0.333s cubic-bezier(0,0,0.21,1) 0.4s;
 }
 
+h1, h2, h3, h4, h5, h6 {
+  font-family: 'Roboto', 'Helvetica', 'Verdana', sans-serif;
+}
+
 .app-deeplink:after {
   opacity: 1;
   pointer-events: auto;