website: Optimize fonts by embedding all fonts into a single CSS.

Also substract the subset of glyphs that we need to reduce the size of the fonts.

website/.gitignore

@@ -2,4 +2,4 @@
 /*/*.html
 !/ttyshot/*.html
 /tools/*.bin
-/_dst
+/_*

website/Makefile

@@ -15,7 +15,7 @@ default: gen
 # Generates the website into the dst directory.
 gen: tools $(HTMLS)
 	./$(TOOLS_DIR)/genblog.bin . $(DST_DIR)
-	ln -sf `pwd`/favicons/* $(DST_DIR)/
+	ln -sf `pwd`/fonts.css `pwd`/favicons/* $(DST_DIR)/
 
 tools:
 	for tool in $(TOOLS); do \

website/cmd/runefreq/main.go

@@ -0,0 +1,34 @@
+package main
+
+import (
+	"bufio"
+	"fmt"
+	"io"
+	"log"
+	"os"
+	"sort"
+)
+
+func main() {
+	freq := map[int]int{}
+	rd := bufio.NewReader(os.Stdin)
+	for {
+		r, _, err := rd.ReadRune()
+		if err == io.EOF {
+			break
+		} else if err != nil {
+			log.Fatal(err)
+		}
+		if r > 0x7f {
+			freq[int(r)]++
+		}
+	}
+	var keys []int
+	for k := range freq {
+		keys = append(keys, k)
+	}
+	sort.Ints(keys)
+	for _, k := range keys {
+		fmt.Printf("%d U+%04d %s\n", freq[k], k, string(rune(k)))
+	}
+}

website/gen-fonts-css.elv

@@ -0,0 +1,51 @@
+# Generates fonts.css by doing the following:
+#
+# 1. Download Source Serif Pro and Fira Mono
+#
+# 2. Downsize them by only keeping the Latin glyphs
+#
+# 3. Embed into the CSS file as base64
+#
+# External dependencies:
+#   base64: for encoding to base64
+#   curl: for downloading files
+#   fonttools: for processing font files
+
+# Subset of glyphs to include, other than ASCII. Discovered with:
+#
+# cat **.html | go run ./cmd/runefreq | sort -nr
+subset=…’“”
+
+mkdir -p _fonts_tmp
+pwd=_fonts_tmp {
+  @ssp-files-base = SourceSerifPro-{Regular It Semibold SemiboldIt}
+  for base $ssp-files-base {
+    curl -C - -L -o $base.otf -s https://github.com/adobe-fonts/source-serif-pro/raw/release/OTF/$base.otf
+  }
+  @fm-files-base = FiraMono-{Regular Bold}
+  for base $fm-files-base {
+    curl -C - -L -o $base.otf -s https://github.com/mozilla/Fira/raw/master/otf/$base.otf
+  }
+  for base [$@ssp-files-base $@fm-files-base] {
+    fonttools subset $base.otf --unicodes=00-7f --text=$subset
+    fonttools ttLib.woff2 compress -o $base.subset.woff2 $base.subset.otf
+  }
+}
+
+fn font-face [family weight style file]{
+  echo "@font-face {
+    font-family: "$family";
+    font-weight: "$weight";
+    font-style: "$style";
+    font-strecth: normal;
+    src: url('data:font/woff2;charset=utf-8;base64,"(base64 -w0 _fonts_tmp/$file.subset.woff2 | slurp)"') format('woff2');
+}"
+}
+
+font-face 'Source Serif Pro' 400 normal SourceSerifPro-Regular
+font-face 'Source Serif Pro' 400 italic SourceSerifPro-It
+font-face 'Source Serif Pro' 600 normal SourceSerifPro-Semibold
+font-face 'Source Serif Pro' 600 italic SourceSerifPro-SemiboldIt
+
+font-face 'Fira Mono' 400 normal FiraMono-Regular
+font-face 'Fira Mono' 600 normal FiraMono-Bold

website/index.toml

@@ -2,7 +2,7 @@ title = "Elvish Shell"
 author = "Qi Xiao"
 feedPosts = 10
 template = "template.html"
-baseCSS = ["reset.css", "style.css", "fonts.css"]
+baseCSS = ["reset.css", "style.css"]
 rootURL = "https://elv.sh"
 
 [index]

website/template.html

@@ -27,6 +27,8 @@
   <meta name="msapplication-TileColor" content="#da532c">
   <meta name="theme-color" content="#ffffff">
 
+  <link rel="stylesheet" href="{{ rootURL }}/fonts.css"/>
+
   <style>
     {{ .BaseCSS }}
     {{ .ExtraCSS }}