Async font loading for the website?

website/themes/uppy/layout/layout.ejs

@@ -6,7 +6,7 @@
     <meta charset="utf-8">
     <meta name="description" content="<%- config.title %> - <%- config.subtitle %>">
     <meta name="viewport" content="width=device-width, initial-scale=1">
-    <link href="http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600|Roboto Mono" rel="stylesheet">
+    <link href="http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600|Roboto+Mono" rel="stylesheet">
     <link href="http://fonts.googleapis.com/css?family=Poiret+One:400" rel="stylesheet">
     <link rel="icon" href="<%- config.logo_icon %>" type="image/x-icon">
     <script>
@@ -40,6 +40,15 @@
         <script src="/js/smooth-scroll.min.js"></script>
       <% } %>
       <script src="/js/common.js"></script>
+
+      <!--script src="//ajax.googleapis.com/ajax/libs/webfont/1.6.16/webfont.js"></script>
+      <script>
+        WebFont.load({
+          google: {
+            families: ['Source Sans Pro:400,600', 'Roboto Mono', 'Poiret One:400']
+          }
+        });
+      </script-->
     </div>
   </body>
 </html>