switch fonts to Noto

Author: kylepjohnson

_includes/head.html

@@ -5,6 +5,10 @@
 
   {% seo %}
 
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+Mono:wght@400;600&family=Noto+Serif:wght@300;400;600;700&display=swap" rel="stylesheet">
+
   <link rel="icon" href="{{ '/favicon.svg' | relative_url }}" type="image/svg+xml">
 
   <link rel="stylesheet" href="{{ "/css/main.css" | prepend: site.baseurl }}">

_sass/_base.scss

@@ -133,6 +133,7 @@ code {
     border-radius: 3px;
     background-color: $code-bg-color; // dark code background
     color: $text-color;               // readable on dark bg
+    font-family: $code-font-family;
 }
 
 code {

css/main.scss

@@ -10,7 +10,7 @@ img.cltk_logo {
 
 
 // Our variables
-$base-font-family: Helvetica, Arial, sans-serif;
+$base-font-family: 'Noto Serif', Georgia, serif;
 $base-font-size:   16px;
 $small-font-size:  $base-font-size * 0.875;
 $base-line-height: 1.5;
@@ -34,6 +34,7 @@ $on-laptop:        800px;
 
 // Code colors (dark mode)
 $code-bg-color:    hsl(225, 15%, 18%);
+$code-font-family: 'Noto Sans Mono', 'SFMono-Regular', Consolas, Menlo, monospace;