Reduce size of webfont payload

.gitignore

@@ -2,6 +2,7 @@
 **/*.rs.bk
 /node_modules
 /static/styles/app.css
+/static/styles/fonts.css
 /static/styles/*.map
 .sass-cache
 localhost*

src/main.rs

@@ -226,16 +226,22 @@ fn catch_error() -> Template {
     not_found()
 }
 
-fn compile_sass() {
-    let scss = "./src/styles/app.scss";
-    let css = compile_file(scss, Options::default()).expect("couldn't compile sass");
-    let mut file = File::create("./static/styles/app.css").expect("couldn't make css file");
+fn compile_sass(filename: &str) {
+    let scss_file = format!("./src/styles/{}.scss", filename);
+    let css_file = format!("./static/styles/{}.css", filename);
+
+    let css = compile_file(&scss_file, Options::default())
+        .expect(&format!("couldn't compile sass: {}", &scss_file));
+    let mut file =
+        File::create(&css_file).expect(&format!("couldn't make css file: {}", &css_file));
     file.write_all(&css.into_bytes())
-        .expect("couldn't write css file");
+        .expect(&format!("couldn't write css file: {}", &css_file));
 }
 
 fn main() {
-    compile_sass();
+    compile_sass("app");
+    compile_sass("fonts");
+
     rocket::ignite()
         .attach(Template::fairing())
         .mount(

src/styles/fonts.scss

@@ -0,0 +1,121 @@
+// Fira Sans uses these names to refer to its font weights. Alfa Slab One has only a 400 weight,
+// which it also calls "Regular", so this map is used for that font as well.
+//
+// If another font is added, it may use different names for its weights, requiring the code to be
+// refactored. For instance, Fira Mono refers to its 600 weight as "Bold".
+$weight-names: (
+  100: 'Hair',
+  200: 'UltraLight',
+  300: 'Light',
+  400: 'Regular',
+  500: 'Medium',
+  600: 'SemiBold',
+  700: 'Bold',
+  800: 'ExtraBold',
+  900: 'Heavy',
+);
+
+$style-names: (
+  italic: 'Italic',
+);
+
+$unicode-ranges: (
+  latin: (U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD),
+  latin-ext: (U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF),
+  cyrillic: (U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116),
+  cyrillic-ext: (U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F),
+  greek: (U+0370-03FF),
+  greek-ext: (U+1F00-1FFF),
+  vietnamese: (U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB),
+);
+
+$format-names: (
+  eot: 'embedded-opentype',
+  ttf: 'truetype',
+  woff: 'woff',
+  woff2: 'woff2',
+);
+
+/// Produces a full font name (e.g. "Fira Sans SemiBold Italic").
+@function font($family, $weight, $style) {
+  $weight-name: ' #{map-get($weight-names, $weight)}';
+  @if ($style == italic and $weight == 400) {
+    $weight-name: '';
+  }
+
+  $style-name: '';
+  @if ($style != normal) {
+    $style-name: ' #{map-get($style-names, $style)}';
+  }
+
+  @return '#{$family}#{$weight-name}#{$style-name}';
+}
+
+/// Produces a whitespace-free filename, without an extension (e.g. "FiraSans-SemiBoldItalic").
+@function filename($base, $weight, $style) {
+  $weight-name: map-get($weight-names, $weight);
+  @if ($style == italic and $weight == 400) {
+    $weight-name: '';
+  }
+
+  $style-name: '';
+  @if ($style != normal) {
+    $style-name: map-get($style-names, $style);
+  }
+
+  @return '#{$base}-#{$weight-name}#{$style-name}';
+}
+
+/// Produces a list of urls to be used for the `src` property of a `@font-face` block.
+@function urls($filename, $range, $extensions) {
+  $urls: ();
+  @each $extension in $extensions {
+    $url: url('/static/fonts/#{$extension}/#{$filename}.#{$range}.#{$extension}');
+    $format: format(map-get($format-names, $extension));
+
+    $urls: append($urls, $url $format, comma);
+  }
+  @return $urls;
+}
+
+/// Declares a `@font-face` block for each combination of weight, style, and unicode range.
+@mixin declare-font-faces($family, $base-filename, $weights, $styles, $ranges, $formats) {
+  @each $weight in $weights {
+    @each $style in $styles {
+      @each $range in $ranges {
+        $font: font($family, $weight, $style);
+        $filename: filename($base-filename, $weight, $style);
+
+        /* #{$font} - #{$range} */
+        @font-face {
+          font-family: $family;
+          font-weight: $weight;
+          font-style: $style;
+          unicode-range: map-get($unicode-ranges, $range);
+          src: local($font),
+               local($filename),
+               urls($filename, $range, $formats);
+          font-display: block;
+        }
+      }
+    }
+  }
+}
+
+@include declare-font-faces(
+  $family: 'Alfa Slab One',
+  $base-filename: 'AlfaSlabOne',
+  $weights: 400,
+  $styles: normal,
+  $ranges: latin latin-ext vietnamese,
+  $formats: woff2 woff,
+);
+
+@include declare-font-faces(
+  $family: 'Fira Sans',
+  $base-filename: 'FiraSans',
+  $weights: 400 600 800,
+  $styles: normal italic,
+  $ranges: map-keys($unicode-ranges),
+  $formats: woff2 woff,
+);