Preload and optimally load local fonts

Adds template actions that will preload any local fonts used in the
consuming Hugo project if present. Otherwise, will preload and use the
default Typo fonts (Liberata, Monaspace).

In order to make this work while preserving theme fonts, I had to move
the theme fonts into /assets/theme-fonts. If the user decides to add
custom fonts into assets/fonts, then those will be preloaded and
theme-fonts will not be preloaded. User will also have to create an
override for assets/css/fonts.css with their own `@font-face` rules.

Preloading works by adding `<link rel="preload">` tags into the head.
Additionally, I've inlined `assets/css/fonts.css` into a `<style>` tag
to help it get define/loaded earlier and not wait for the rest of the
page CSS to load and render. This should hopefully improve perceived
performance a bit on slower networks.

Wiki has been updated to include instructions on how to add custom fonts
and use them with Typo.

Author: runofthemillgeek

assets/css/fonts.css

@@ -1,46 +1,46 @@
 @font-face {
     font-family: 'Literata';
-    src: url('/fonts/Literata/Literata-Light.woff2') format('woff2');
+    src: url('/theme-fonts/Literata/Literata-Light.woff2') format('woff2');
     font-weight: light;
     font-style: normal;
     font-display: swap;
 }
 
 @font-face {
     font-family: 'Literata';
-    src: url('/fonts/Literata/Literata-LightItalic.woff2') format('woff2');
+    src: url('/theme-fonts/Literata/Literata-LightItalic.woff2') format('woff2');
     font-weight: light;
     font-style: italic;
     font-display: swap;
 }
 
 @font-face {
     font-family: 'Literata';
-    src: url('/fonts/Literata/Literata-SemiBold.woff2') format('woff2');
+    src: url('/theme-fonts/Literata/Literata-SemiBold.woff2') format('woff2');
     font-weight: bold;
     font-style: normal;
     font-display: swap;
 }
 
 @font-face {
     font-family: 'Literata';
-    src: url('/fonts/Literata/Literata-SemiBoldItalic.woff2') format('woff2');
+    src: url('/theme-fonts/Literata/Literata-SemiBoldItalic.woff2') format('woff2');
     font-weight: bold;
     font-style: italic;
     font-display: swap;
 }
 
 @font-face {
     font-family: 'Monaspace';
-    src: url('/fonts/Monaspace/MonaspaceArgon-Regular.woff') format('woff');
+    src: url('/theme-fonts/Monaspace/MonaspaceArgon-Regular.woff') format('woff');
     font-weight: normal;
     font-style: normal;
     font-display: swap;
 }
 
 @font-face {
     font-family: 'Monaspace';
-    src: url('/fonts/Monaspace/MonaspaceArgon-SemiBold.woff') format('woff');
+    src: url('/theme-fonts/Monaspace/MonaspaceArgon-SemiBold.woff') format('woff');
     font-weight: bold;
     font-style: normal;
     font-display: swap;

static/fonts/Literata/Literata-Light.woff2 renamed to assets/theme-fonts/Literata/Literata-Light.woff2

@@ -6,6 +6,7 @@
 
 {{ $faviconPath := (.Site.Params.faviconPath | default "" | absURL) }}
 
+{{- partialCached "head/preload.html" . }}
 <link rel="icon" type="image/ico" href="{{ $faviconPath }}/favicon.ico">
 <link rel="icon" type="image/png" sizes="16x16" href="{{ $faviconPath }}/favicon-16x16.png">
 <link rel="icon" type="image/png" sizes="32x32" href="{{ $faviconPath }}/favicon-32x32.png">

static/fonts/Literata/Literata-LightItalic.woff2 renamed to assets/theme-fonts/Literata/Literata-LightItalic.woff2

@@ -3,7 +3,6 @@
 (resources.Get "css/reset.css")
 (resources.Get "css/vars.css")
 (resources.Get "css/utils.css")
-(resources.Get "css/fonts.css")
 (resources.Get "css/main.css")
 (resources.Get "css/custom.css")
 (resources.Get "css/colors/default.css")
@@ -23,4 +22,10 @@
 | fingerprint
 }}
 
+<style>
+{{- $fontsCss := resources.Get "css/fonts.css"
+        | resources.ExecuteAsTemplate "css/fonts.css" $
+}}
+{{- $fontsCss.Content | safeCSS }}
+</style>
 <link rel="stylesheet" href="{{ $combined.RelPermalink }}" media="all">

static/fonts/Literata/Literata-SemiBold.woff2 renamed to assets/theme-fonts/Literata/Literata-SemiBold.woff2

@@ -0,0 +1,6 @@
+{{- /* Generate preload tags for all fonts within assets/fonts directory */}}
+
+{{- $fonts := or (resources.Match "fonts/**.{eot,ttf,otf,woff,woff2,svg}") (resources.Match "theme-fonts/**.{eot,ttf,otf,woff,woff2,svg}") }}
+{{- range $fonts }}
+  <link rel="preload" as="font" href="{{ .RelPermalink }}" type="{{ .MediaType.Type }}" crossorigin>
+{{- end }}