Use local fonts

client/gulpfile.js

@@ -24,7 +24,7 @@ gulp.task('html', function() {
 });
 
 gulp.task('css', function() {
-  return gulp.src(['src/css/fontello.css', 'src/css/style.css'])
+  return gulp.src(['src/css/fonts.css', 'src/css/fontello.css', 'src/css/style.css'])
     .pipe(concat('bundle.css'))
     .pipe(autoprefixer())
     .pipe(nano())
@@ -55,13 +55,18 @@ gulp.task('fonts', function() {
     .pipe(gulp.dest('dist/font'));
 });
 
+gulp.task('fonts:woff', function() {
+  return gulp.src('src/font/*(*.woff|*.woff2)')
+    .pipe(gulp.dest('dist/gz/font'));
+});
+
 gulp.task('config', function() {
   return gulp.src('../config.default.toml')
     .pipe(gulp.dest('dist/gz'));
 });
 
 function compress() {
-  return gulp.src(['dist/**/!(*.gz)', '!dist/{gz,gz/**}'])
+  return gulp.src(['dist/**/!(*.gz|*.woff|*.woff2)', '!dist/{gz,gz/**}'])
     .pipe(gzip())
     .pipe(gulp.dest('dist/gz'));
 }
@@ -77,7 +82,7 @@ gulp.task('bindata:dev', ['gzip:dev', 'config'], function(cb) {
   exec('go-bindata -debug -pkg assets -o ../assets/bindata.go -prefix "dist/gz" dist/gz/...', cb);
 });
 
-gulp.task('dev', ['css', 'fonts', 'config', 'gzip:dev', 'bindata:dev'], function() {
+gulp.task('dev', ['css', 'fonts', 'fonts:woff', 'config', 'gzip:dev', 'bindata:dev'], function() {
   gulp.watch('src/css/*.css', ['css']);
 
   var config = require('./webpack.config.dev.js');
@@ -109,6 +114,6 @@ gulp.task('dev', ['css', 'fonts', 'config', 'gzip:dev', 'bindata:dev'], function
   });
 });
 
-gulp.task('build', ['css', 'js', 'fonts', 'config', 'gzip', 'bindata']);
+gulp.task('build', ['css', 'js', 'fonts', 'fonts:woff', 'config', 'gzip', 'bindata']);
 
 gulp.task('default', ['dev']);

client/src/css/fontello.css

@@ -1,25 +1,13 @@
 @font-face {
   font-family: 'fontello';
-  src: url('font/fontello.eot?73444496');
-  src: url('font/fontello.eot?73444496#iefix') format('embedded-opentype'),
+  src: url('font/fontello.woff2?73444496') format('woff2'),
        url('font/fontello.woff?73444496') format('woff'),
-       url('font/fontello.ttf?73444496') format('truetype'),
-       url('font/fontello.svg?73444496#fontello') format('svg');
+       url('font/fontello.ttf?73444496') format('truetype');
   font-weight: normal;
   font-style: normal;
 }
-/* Chrome hack: SVG is rendered more smooth in Windozze. 100% magic, uncomment if you need it. */
-/* Note, that will break hinting! In other OS-es font will be not as sharp as it could be */
-/*
-@media screen and (-webkit-min-device-pixel-ratio:0) {
-  @font-face {
-    font-family: 'fontello';
-    src: url('../font/fontello.svg?73444496#fontello') format('svg');
-  }
-}
-*/
 
- [class^="icon-"]:before, [class*=" icon-"]:before {
+[class^="icon-"]:before, [class*=" icon-"]:before {
   font-family: "fontello";
   font-style: normal;
   font-weight: normal;
@@ -49,6 +37,7 @@
   /* Uncomment for 3D effect */
   /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
 }
+
 .icon-cog:before { content: '\e800'; } /* '' */
 .icon-ellipsis:before { content: '\e801'; } /* '' */
 .icon-search:before { content: '\e802'; } /* '' */

client/src/css/fonts.css

@@ -0,0 +1,41 @@
+@font-face {
+  font-family: 'Montserrat';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Montserrat-Regular'),
+       url(/font/Montserrat-Regular.woff2) format('woff2'),
+       url(/font/Montserrat-Regular.woff) format('woff'),
+       url(/font/Montserrat-Regular.ttf) format('truetype');
+}
+
+@font-face {
+  font-family: 'Montserrat';
+  font-style: normal;
+  font-weight: 700;
+  src: local('Montserrat-Bold'),
+       url(/font/Montserrat-Bold.woff2) format('woff2'),
+       url(/font/Montserrat-Bold.woff) format('woff'),
+       url(/font/Montserrat-Bold.ttf) format('truetype');
+}
+
+@font-face {
+  font-family: 'Roboto Mono';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Roboto Mono'),
+       local('RobotoMono-Regular'),
+       url(/font/RobotoMono-Regular.woff2) format('woff2'),
+       url(/font/RobotoMono-Regular.woff) format('woff'),
+       url(/font/RobotoMono-Regular.ttf) format('truetype');
+}
+
+@font-face {
+  font-family: 'Roboto Mono';
+  font-style: normal;
+  font-weight: 700;
+  src: local('Roboto Mono Bold'),
+       local('RobotoMono-Bold'),
+       url(/font/RobotoMono-Bold.woff2) format('woff2'),
+       url(/font/RobotoMono-Bold.woff) format('woff'),
+       url(/font/RobotoMono-Bold.ttf) format('truetype');
+}

client/src/font/fontello.svg

@@ -1,20 +0,0 @@
-<?xml version="1.0" standalone="no"?>
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg xmlns="http://www.w3.org/2000/svg">
-<metadata>Copyright (C) 2015 by original authors @ fontello.com</metadata>
-<defs>
-<font id="fontello" horiz-adv-x="1000" >
-<font-face font-family="fontello" font-weight="400" font-stretch="normal" units-per-em="1000" ascent="850" descent="-150" />
-<missing-glyph horiz-adv-x="1000" />
-<glyph glyph-name="cog" unicode="&#xe800;" d="m571 350q0 59-41 101t-101 42-101-42-42-101 42-101 101-42 101 42 41 101z m286 61v-124q0-7-4-13t-11-7l-104-16q-10-30-21-51 19-27 59-77 6-6 6-13t-5-13q-15-21-55-61t-53-39q-7 0-14 5l-77 60q-25-13-51-21-9-76-16-104-4-16-20-16h-124q-8 0-14 5t-6 12l-16 103q-27 9-50 21l-79-60q-6-5-14-5-8 0-14 6-70 64-92 94-4 5-4 13 0 6 5 12 8 12 28 37t30 40q-15 28-23 55l-102 15q-7 1-11 7t-5 13v124q0 7 5 13t10 7l104 16q8 25 22 51-23 32-60 77-6 7-6 14 0 5 5 12 15 20 55 60t53 40q7 0 15-5l77-60q24 13 50 21 9 76 17 104 3 15 20 15h124q7 0 13-4t7-12l15-103q28-9 50-21l80 60q5 5 13 5 7 0 14-5 72-67 92-95 4-5 4-13 0-6-4-12-9-12-29-38t-30-39q14-28 23-55l102-15q7-1 12-7t4-13z" horiz-adv-x="857.1" />
-<glyph glyph-name="ellipsis" unicode="&#xe801;" d="m214 439v-107q0-22-15-38t-38-15h-107q-23 0-38 15t-16 38v107q0 23 16 38t38 16h107q22 0 38-16t15-38z m286 0v-107q0-22-16-38t-38-15h-107q-22 0-38 15t-15 38v107q0 23 15 38t38 16h107q23 0 38-16t16-38z m286 0v-107q0-22-16-38t-38-15h-107q-22 0-38 15t-16 38v107q0 23 16 38t38 16h107q22 0 38-16t16-38z" horiz-adv-x="785.7" />
-<glyph glyph-name="search" unicode="&#xe802;" d="m643 386q0 103-74 176t-176 74-177-74-73-176 73-177 177-73 176 73 74 177z m286-465q0-29-22-50t-50-21q-30 0-50 21l-191 191q-100-69-223-69-80 0-153 31t-125 84-84 125-31 153 31 152 84 126 125 84 153 31 152-31 126-84 84-126 31-152q0-123-69-223l191-191q21-21 21-51z" horiz-adv-x="928.6" />
-<glyph glyph-name="user" unicode="&#xe803;" d="m786 66q0-67-41-106t-108-39h-488q-67 0-108 39t-41 106q0 30 2 58t8 61 15 60 24 55 34 45 48 30 62 11q5 0 24-12t41-27 60-27 75-12 74 12 61 27 41 27 24 12q34 0 62-11t48-30 34-45 24-55 15-60 8-61 2-58z m-179 498q0-88-63-151t-151-63-152 63-62 151 62 152 152 63 151-63 63-152z" horiz-adv-x="785.7" />
-<glyph glyph-name="users" unicode="&#xe804;" d="m331 350q-90-3-148-71h-75q-45 0-77 22t-31 66q0 197 69 197 4 0 25-11t54-24 66-12q38 0 75 13-3-21-3-37 0-78 45-143z m598-356q0-66-41-105t-108-39h-488q-68 0-108 39t-41 105q0 30 2 58t8 61 14 61 24 54 35 45 48 30 62 11q6 0 24-12t41-26 59-27 76-12 75 12 60 27 41 26 23 12q35 0 63-11t47-30 35-45 24-54 15-61 8-61 2-58z m-572 713q0-59-42-101t-101-42-101 42-42 101 42 101 101 42 101-42 42-101z m393-214q0-89-63-152t-151-62-152 62-63 152 63 151 152 63 151-63 63-151z m321-126q0-43-31-66t-77-22h-75q-57 68-147 71 45 65 45 143 0 16-3 37 37-13 74-13 33 0 67 12t54 24 24 11q69 0 69-197z m-71 340q0-59-42-101t-101-42-101 42-42 101 42 101 101 42 101-42 42-101z" horiz-adv-x="1071.4" />
-<glyph glyph-name="logout" unicode="&#xe805;" d="m502 0l0 100 98 0 0-100q0-40-29-70t-71-30l-400 0q-40 0-70 30t-30 70l0 700q0 42 30 71t70 29l400 0q42 0 71-29t29-71l0-150-98 0 0 150-402 0 0-700 402 0z m398 326l-198-196 0 120-450 0 0 150 450 0 0 120z" horiz-adv-x="900" />
-<glyph glyph-name="menu" unicode="&#xe806;" d="m650 400q22 0 36-15t14-35-15-35-35-15l-600 0q-20 0-35 15t-15 35 14 35 36 15l600 0z m-600 100q-20 0-35 15t-15 35 14 35 36 15l600 0q22 0 36-15t14-35-15-35-35-15l-600 0z m600-300q22 0 36-15t14-35-15-35-35-15l-600 0q-20 0-35 15t-15 35 14 35 36 15l600 0z" horiz-adv-x="700" />
-<glyph glyph-name="plus" unicode="&#xe807;" d="m786 439v-107q0-22-16-38t-38-15h-232v-233q0-22-16-37t-38-16h-107q-22 0-38 16t-15 37v233h-232q-23 0-38 15t-16 38v107q0 23 16 38t38 16h232v232q0 22 15 38t38 16h107q23 0 38-16t16-38v-232h232q22 0 38-16t16-38z" horiz-adv-x="785.7" />
-<glyph glyph-name="cancel" unicode="&#xe808;" d="m724 112q0-22-15-38l-76-76q-16-15-38-15t-38 15l-164 165-164-165q-16-15-38-15t-38 15l-76 76q-16 16-16 38t16 38l164 164-164 164q-16 16-16 38t16 38l76 76q16 16 38 16t38-16l164-164 164 164q16 16 38 16t38-16l76-76q15-15 15-38t-15-38l-164-164 164-164q15-15 15-38z" horiz-adv-x="785.7" />
-</font>
-</defs>
-</svg>

server/index_template.go

@@ -6,7 +6,7 @@ import (
 )
 
 var (
-	index_0 = []byte(`<!DOCTYPE html><html lang=en><head><meta charset=UTF-8><meta name=viewport content="width=device-width,initial-scale=1"><title>Dispatch</title><link href="https://fonts.googleapis.com/css?family=Montserrat:400,700|Roboto+Mono:400,700" rel=stylesheet><link href=/`)
+	index_0 = []byte(`<!DOCTYPE html><html lang=en><head><meta charset=UTF-8><meta name=viewport content="width=device-width,initial-scale=1"><title>Dispatch</title><link href=/`)
 	index_1 = []byte(` rel=stylesheet></head><body><div id=root></div><script>window.__ENV__=`)
 	index_2 = []byte(`</script><script src=/`)
 	index_3 = []byte(`></script></body></html>`)

server/serve_files.go

@@ -8,6 +8,7 @@ import (
 	"io/ioutil"
 	"log"
 	"net/http"
+	"path/filepath"
 	"strconv"
 	"strings"
 	"time"
@@ -17,52 +18,41 @@ import (
 	"github.com/khlieng/dispatch/assets"
 )
 
-var (
-	files = []File{
-		File{
-			Path:         "bundle.js",
-			Asset:        "bundle.js.gz",
-			ContentType:  "text/javascript",
-			CacheControl: "max-age=31536000",
-		},
-		File{
-			Path:         "bundle.css",
-			Asset:        "bundle.css.gz",
-			ContentType:  "text/css",
-			CacheControl: "max-age=31536000",
-		},
-		File{
-			Path:        "font/fontello.woff",
-			Asset:       "font/fontello.woff.gz",
-			ContentType: "application/font-woff",
-		},
-		File{
-			Path:        "font/fontello.ttf",
-			Asset:       "font/fontello.ttf.gz",
-			ContentType: "application/x-font-ttf",
-		},
-		File{
-			Path:        "font/fontello.eot",
-			Asset:       "font/fontello.eot.gz",
-			ContentType: "application/vnd.ms-fontobject",
-		},
-		File{
-			Path:        "font/fontello.svg",
-			Asset:       "font/fontello.svg.gz",
-			ContentType: "image/svg+xml",
-		},
-	}
-
-	hstsHeader string
-)
-
 type File struct {
 	Path         string
 	Asset        string
 	ContentType  string
 	CacheControl string
+	Gzip         bool
 }
 
+var (
+	files = []*File{
+		&File{
+			Path:         "bundle.js",
+			Asset:        "bundle.js.gz",
+			ContentType:  "text/javascript",
+			CacheControl: "max-age=31536000",
+			Gzip:         true,
+		},
+		&File{
+			Path:         "bundle.css",
+			Asset:        "bundle.css.gz",
+			ContentType:  "text/css",
+			CacheControl: "max-age=31536000",
+			Gzip:         true,
+		},
+	}
+
+	contentTypes = map[string]string{
+		".woff2": "font/woff2",
+		".woff":  "application/font-woff",
+		".ttf":   "application/x-font-ttf",
+	}
+
+	hstsHeader string
+)
+
 func initFileServer() {
 	if !viper.GetBool("dev") {
 		data, err := assets.Asset(files[0].Asset)
@@ -81,6 +71,23 @@ func initFileServer() {
 		hash = md5.Sum(data)
 		files[1].Path = "bundle." + base64.RawURLEncoding.EncodeToString(hash[:]) + ".css"
 
+		fonts, err := assets.AssetDir("font")
+		if err != nil {
+			log.Fatal(err)
+		}
+
+		for _, font := range fonts {
+			path := strings.TrimSuffix(font, ".gz")
+
+			files = append(files, &File{
+				Path:         filepath.Join("font", path),
+				Asset:        filepath.Join("font", font),
+				ContentType:  contentTypes[filepath.Ext(path)],
+				CacheControl: "max-age=31536000",
+				Gzip:         strings.HasSuffix(font, ".gz"),
+			})
+		}
+
 		if viper.GetBool("https.hsts.enabled") {
 			hstsHeader = "max-age=" + viper.GetString("https.hsts.max_age")
 
@@ -107,11 +114,7 @@ func serveFiles(w http.ResponseWriter, r *http.Request) {
 
 	for _, file := range files {
 		if strings.HasSuffix(r.URL.Path, file.Path) {
-			if file.CacheControl != "" {
-				w.Header().Set("Cache-Control", file.CacheControl)
-			}
-
-			serveFile(w, r, file.Asset, file.ContentType)
+			serveFile(w, r, file)
 			return
 		}
 	}
@@ -148,8 +151,8 @@ func serveIndex(w http.ResponseWriter, r *http.Request) {
 	}
 }
 
-func serveFile(w http.ResponseWriter, r *http.Request, path, contentType string) {
-	info, err := assets.AssetInfo(path)
+func serveFile(w http.ResponseWriter, r *http.Request, file *File) {
+	info, err := assets.AssetInfo(file.Asset)
 	if err != nil {
 		http.Error(w, "", http.StatusInternalServerError)
 		return
@@ -159,18 +162,25 @@ func serveFile(w http.ResponseWriter, r *http.Request, path, contentType string)
 		return
 	}
 
-	data, err := assets.Asset(path)
+	data, err := assets.Asset(file.Asset)
 	if err != nil {
 		http.Error(w, "", http.StatusInternalServerError)
 		return
 	}
 
-	w.Header().Set("Content-Type", contentType)
+	if file.CacheControl != "" {
+		w.Header().Set("Cache-Control", file.CacheControl)
+	}
 
-	if strings.Contains(r.Header.Get("Accept-Encoding"), "gzip") {
+	w.Header().Set("Content-Type", file.ContentType)
+
+	if file.Gzip && strings.Contains(r.Header.Get("Accept-Encoding"), "gzip") {
 		w.Header().Set("Content-Encoding", "gzip")
 		w.Header().Set("Content-Length", strconv.Itoa(len(data)))
 		w.Write(data)
+	} else if !file.Gzip {
+		w.Header().Set("Content-Length", strconv.Itoa(len(data)))
+		w.Write(data)
 	} else {
 		gzr, err := gzip.NewReader(bytes.NewReader(data))
 		buf, err := ioutil.ReadAll(gzr)