Hack webfont for code -- https://github.com/source-foundry/Hack

assets/sass/abstracts/_functions.scss

@@ -13,8 +13,8 @@
 }
 
 // Web fonts (see components/_fonts.scss)
-@mixin font-face($family, $src,
-                 $weight: normal, $style: normal, $display: swap) {
+// stylelint-disable indentation
+@mixin font-face($family, $src, $weight: normal, $range: false, $style: normal, $display: swap) {
 	@font-face {
     font-family: $family;
     font-style: $style;
@@ -25,7 +25,9 @@
     // src: local("#{$src-local}"), local("#{$src-local-alt}"),
     //      url('#{$src}.ttf') format('truetype'),
     //      url('#{$src}.eot') format('embedded-opentype');
-    unicode-range: U+0000-00FF, U+2000-206F, U+20A0-20CF,
-                   U+2190-21FF, U+2200-22FF, U+2122;
+    @if $range {
+      unicode-range: U+0000-00FF, U+2000-206F, U+20A0-20CF,
+                     U+2190-21FF, U+2200-22FF, U+2122;
+    }
   }
 }

assets/sass/abstracts/_variables.scss

@@ -2,6 +2,7 @@
 
 // System fonts and web fonts
 // https://markdotto.com/2018/02/07/github-system-fonts/
+// stylelint-disable indentation
 $system-fonts: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
                "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans",
                "Droid Sans", "Helvetica Neue", sans-serif,
@@ -10,6 +11,7 @@ $system-fonts-emoji: "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
 $system-fonts-monospace: "SFMono-Regular", "Consolas", "Liberation Mono",
                "Menlo", "Courier", monospace;
 $webfont-inter: "Inter", sans-serif;
+$webfont-hack: "Hack", monospace;
 
 // Misc Settings
 $responsive-width: 890px;
@@ -42,7 +44,6 @@ $colors-home:(
   angular:    #c3002f,
   vue:        #486491,
   java:       #ab6311,
-//  cpp:        #865fc5,
   python:     #fea500,
   php:        #8892bf,
   ruby:       #d34135,

assets/sass/components/_fonts.scss

@@ -1,6 +1,9 @@
 @charset "UTF-8";
 
-/*! Inter UI | SIL Open Font License 1.1 | https://rsms.me/inter/ */
-@include font-face("Inter", "./fonts/inter-regular-subset", 400);
-@include font-face("Inter", "./fonts/inter-medium-subset", 500);
-@include font-face("Inter", "./fonts/inter-bold-subset", 700);
+/*! Inter Typeface | SIL Open Font License 1.1 | https://rsms.me/inter/ */
+@include font-face("Inter", "./fonts/inter-regular-subset", 400, true);
+@include font-face("Inter", "./fonts/inter-medium-subset", 500, true);
+@include font-face("Inter", "./fonts/inter-bold-subset", 700, true);
+
+/*! Hack Typeface | MIT License | https://sourcefoundry.org/hack/ */
+@include font-face("Hack", "./fonts/hack-regular-subset", 400);

assets/sass/components/_global.scss

@@ -111,12 +111,6 @@ div#content {
     max-width: 100%;
     height: auto;
     border: 0;
-
-    // Subtitle caption styling
-    // stylelint-disable-next-line selector-pseudo-element-no-unknown
-    &::cue {
-      font-family: inherit;
-    }
   }
 
   div.embed {
@@ -163,9 +157,9 @@ div#content {
   // all code
   code,
   div.highlight {
-    font-family: $system-fonts-monospace;
+    font-family: $webfont-hack;
     background: $color-super-light;
-    font-size: 0.9em;
+    font-size: 0.95em;
     letter-spacing: 0;
     page-break-inside: avoid;
   }

layouts/_default/single.amp.html

@@ -28,8 +28,8 @@
         font-style: normal;
         font-weight: 400;
         font-display: swap;
-        src: url("{{ "fonts/inter-regular.woff2" | absURL }}") format("woff2"),
-             url("{{ "fonts/inter-regular.woff" | absURL }}") format("woff");
+        src: url("{{ "fonts/inter-regular-subset.woff2" | absURL }}") format("woff2"),
+             url("{{ "fonts/inter-regular-subset.woff" | absURL }}") format("woff");
         unicode-range: U+0000-00FF, U+2000-206F, U+20A0-20CF,
                        U+2190-21FF, U+2200-22FF, U+2122;
       }
@@ -38,8 +38,8 @@
         font-style: normal;
         font-weight: 500;
         font-display: swap;
-        src: url("{{ "fonts/inter-medium.woff2" | absURL }}") format("woff2"),
-             url("{{ "fonts/inter-medium.woff" | absURL }}") format("woff");
+        src: url("{{ "fonts/inter-medium-subset.woff2" | absURL }}") format("woff2"),
+             url("{{ "fonts/inter-medium-subset.woff" | absURL }}") format("woff");
         unicode-range: U+0000-00FF, U+2000-206F, U+20A0-20CF,
                        U+2190-21FF, U+2200-22FF, U+2122;
       }
@@ -48,11 +48,20 @@
         font-style: normal;
         font-weight: 700;
         font-display: swap;
-        src: url("{{ "fonts/inter-bold.woff2" | absURL }}") format("woff2"),
-             url("{{ "fonts/inter-bold.woff" | absURL }}") format("woff");
+        src: url("{{ "fonts/inter-bold-subset.woff2" | absURL }}") format("woff2"),
+             url("{{ "fonts/inter-bold-subset.woff" | absURL }}") format("woff");
         unicode-range: U+0000-00FF, U+2000-206F, U+20A0-20CF,
                        U+2190-21FF, U+2200-22FF, U+2122;
       }
+      @font-face {
+        font-family: "Hack";
+        font-style: normal;
+        font-weight: 400;
+        font-display: swap;
+        src: url("{{ "fonts/hack-regular-subset.woff2" | absURL }}") format("woff2"),
+             url("{{ "fonts/hack-regular-subset.woff" | absURL }}") format("woff");
+      }
+
 
       body {
         font-family: "Inter", sans-serif;
@@ -171,9 +180,9 @@
         text-align: right;
       }
       div.highlight, code {
-        font-family: "SFMono-Regular", "Consolas", "Liberation Mono", "Menlo", "Courier", monospace;
+        font-family: "Hack", monospace;
         background: #f4f4f4;
-        font-size: 0.9em;
+        font-size: 0.95em;
         letter-spacing: 0;
         page-break-inside: avoid;
       }