Fix Lato webfont to load properly by using the <link> tag instead of CSS @import

admin/static/css/common.styl

@@ -1,7 +1,5 @@
 /* Common CSS that is imported into Admin and Site */
 
-@import url('http://fonts.googleapis.com/css?family=Lato:300,400,700')
-
 // apply a natural box layout model to all elements
 *
   border-box()

admin/templates/base.html

@@ -11,6 +11,7 @@
   <link rel="shortcut icon" href="{{baseURL}}/static/img/favicon.ico">
   <!-- <link rel="apple-touch-icon-precomposed" href="{{baseURL}}/static/img/apple-touch-icon-precomposed.png"> -->
 
+  <link rel='stylesheet' href='http://fonts.googleapis.com/css?family=Lato:300,400,700' type='text/css'>
   <link rel="stylesheet" href="{{baseURL}}/static/css/index.css" type="text/css" media="screen" charset="utf-8">
 
   <script src="{{baseURL}}/modules.js"></script>

site/templates/base.html

@@ -31,6 +31,7 @@
   {{/if}}
   <!-- <link rel="apple-touch-icon-precomposed" href="{{baseURL}}/static/img/apple-touch-icon-precomposed.png"> -->
 
+  <link rel='stylesheet' href='http://fonts.googleapis.com/css?family=Lato:300,400,700' type='text/css'>
   <link rel="stylesheet" href="{{baseURL}}/static/css/index.css" type="text/css" media="all" charset="utf-8">
   {{#if site.theme}}
   <link rel="stylesheet" href="{{baseURL}}/static/css/themes/{{site.theme}}.css" type="text/css" media="all" charset="utf-8">