feat(fonts): download fonts from grafana instead of CDN

Makes its possible to run grafana without internet access.
The performance hit by not using a cdn is very small since
most grafana instances are setup on locally.

closes #4223

public/sass/_grafana.scss

@@ -14,7 +14,6 @@
 @import "base/reboot";
 @import "base/type";
 @import "base/forms";
-@import "base/fonts";
 @import "base/grid";
 @import "base/font_awesome";
 

public/sass/base/_grafana_icons.scss

+@font-face {
+    font-family: 'grafana-icons';
+    src:    url('../fonts/grafana-icons.eot?h6rv8b');
+    src:    url('../fonts/grafana-icons.eot?h6rv8b#iefix') format('embedded-opentype'),
+        url('../fonts/grafana-icons.ttf?h6rv8b') format('truetype'),
+        url('../fonts/grafana-icons.woff?h6rv8b') format('woff'),
+        url('../fonts/grafana-icons.svg?h6rv8b#grafana-icons') format('svg');
+    font-weight: normal;
+    font-style: normal;
+}
+
+.icon-gf {
+    /* use !important to prevent issues with browser extensions that change fonts */
+    font-family: 'grafana-icons' !important;
+    speak: none;
+    font-style: normal;
+    font-weight: normal;
+    font-variant: normal;
+    text-transform: none;
+    line-height: 1;
+
+    /* Better Font Rendering =========== */
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+}
+
+.inline-icon-gf {
+    vertical-align: middle;
+}
+
+.icon-gf-raintank_wordmark:before {
+    content: "\e600";
+}
+.icon-gf-raintank_icn:before {
+    content: "\e601";
+}
+.icon-gf-raintank_r-icn:before {
+    content: "\e905";
+}
+.icon-gf-check-alt:before {
+    content: "\e603";
+}
+.icon-gf-check:before {
+    content: "\e604";
+}
+.icon-gf-collector:before {
+    content: "\e605";
+}
+.icon-gf-dashboard:before {
+    content: "\e606";
+}
+.icon-gf-panel:before {
+    content: "\e904";
+}
+.icon-gf-datasources:before {
+    content: "\e607";
+}
+.icon-gf-endpoint-tiny:before {
+    content: "\e608";
+}
+.icon-gf-endpoint:before {
+    content: "\e609";
+}
+.icon-gf-filter:before {
+    content: "\e60a";
+}
+.icon-gf-status:before {
+    content: "\e60b";
+}
+.icon-gf-monitoring:before {
+    content: "\e60c";
+}
+.icon-gf-monitoring-tiny:before {
+    content: "\e620";
+}
+.icon-gf-jump-to-dashboard:before {
+    content: "\e60d";
+}
+.icon-gf-warn:before {
+    content: "\e60e";
+}
+.icon-gf-nodata:before {
+    content: "\e60f";
+}
+.icon-gf-critical:before {
+    content: "\e610";
+}
+.icon-gf-online:before {
+    content: "\e611";
+}
+.icon-gf-event-error:before {
+    content: "\e623";
+}
+.icon-gf-event:before {
+    content: "\e624";
+}
+.icon-gf-sadface:before {
+    content: "\e907";
+}
+.icon-gf-private-collector:before {
+    content: "\e612";
+}
+.icon-gf-alert:before {
+    content: "\e61f";
+}
+.icon-gf-alert-disabled:before {
+    content: "\e621";
+}
+.icon-gf-refresh:before {
+    content: "\e613";
+}
+.icon-gf-save:before {
+    content: "\e614";
+}
+.icon-gf-settings:before {
+    content: "\e615";
+}
+.icon-gf-share:before {
+    content: "\e616";
+}
+.icon-gf-star:before {
+    content: "\e617";
+}
+.icon-gf-search:before {
+    content: "\e618";
+}
+.icon-gf-tag-add:before {
+    content: "\e619";
+}
+.icon-gf-tag-remove:before {
+    content: "\e61a";
+}
+.icon-gf-video:before {
+    content: "\e61b";
+}
+.icon-gf-bulk_action:before {
+    content: "\e61c";
+}
+.icon-gf-users:before {
+    content: "\e622";
+}
+.icon-gf-globe:before {
+    content: "\e61d";
+}
+.icon-gf-snapshot:before {
+    content: "\e61e";
+}
+.icon-gf-play-grafana-icon:before {
+    content: "\e629";
+}
+.icon-gf-grafana-icon:before {
+    content: "\e625";
+}
+.icon-gf-email:before {
+    content: "\e628";
+}
+.icon-gf-stopwatch:before {
+    content: "\e626";
+}
+.icon-gf-skull:before {
+    content: "\e900";
+}
+.icon-gf-probe:before {
+    content: "\e901";
+}
+.icon-gf-apps:before {
+    content: "\e902";
+}
+.icon-gf-scale:before {
+    content: "\e906";
+}
+.icon-gf-litmus:before {
+    content: "\e627";
+}
+.icon-gf-grafana_wordmark:before {
+    content: "\e903";
+}
+
+.icon-gf-app:before {
+  content: "\e902";
+}
+.icon-gf-datasource:before {
+  content: "\e607";
+}
+

public/sass/fonts.scss

+@import "base/fonts";
+@import "base/font_awesome";
+@import "base/grafana_icons";

public/views/index.html

@@ -8,7 +8,7 @@
 
     <title>Grafana</title>
 
-		<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,400italic,600,300,700' rel='stylesheet' type='text/css'>
+		<link href='[[.AppSubUrl]]/public/css/fonts.min.css' rel='stylesheet' type='text/css'>
 
 		[[if .User.LightTheme]]
 		  <link rel="stylesheet" href="[[.AppSubUrl]]/public/css/grafana.light.min.css">

tasks/default_task.js

@@ -6,6 +6,7 @@ module.exports = function(grunt) {
     'sass',
     'concat:cssDark',
     'concat:cssLight',
+    'concat:cssFonts',
     'styleguide',
     'sasslint',
     'postcss'

tasks/options/concat.js

@@ -22,6 +22,11 @@ module.exports = function(config) {
       dest: '<%= genDir %>/css/grafana.light.min.css'
     },
 
+    cssFonts: {
+      src: [ '<%= genDir %>/css/fonts.css' ],
+      dest: '<%= genDir %>/css/fonts.min.css'
+    },
+
     js: {
       src: [
         '<%= genDir %>/vendor/npm/es5-shim/es5-shim.js',

tasks/options/sass.js

@@ -6,6 +6,7 @@ module.exports = function(config) {
       files: {
         "<%= genDir %>/css/grafana.dark.css": "<%= srcDir %>/sass/grafana.dark.scss",
         "<%= genDir %>/css/grafana.light.css": "<%= srcDir %>/sass/grafana.light.scss",
+        "<%= genDir %>/css/fonts.css": "<%= srcDir %>/sass/fonts.scss",
       }
     }
   };