Merge pull request #64 from theNewDynamic/63-preload-fonts

Fonts: Fine tune `preload`, retire `prefetch`

core/fonts/private/GetFormat.html

@@ -0,0 +1,33 @@
+{{/*
+  GetFormat
+  Retrieves the font format of a given resource
+
+  @author @regisphilibert
+
+  @context Resource (.)
+
+  @access private
+
+  @returns String
+
+*/}}
+{{ $format := "woff2" }}
+{{/* It appears CloudFlare produces an empty string when calling .MediaType.SubType on a woff2...
+    As this is by far the best font format these days in terms of support and optimization,
+    making it default to ensure it is not botched by cloudflare is "ok".
+*/}}
+{{ with .MediaType.SubType }}
+  {{ $format = . }}
+{{ end }}
+{{ $irregular := dict 
+  "vnd.ms-fontobject" "embedded-opentype"
+  "font-woff" "woff"
+  "ttf" "truetype"
+  "font-sfnt" "truetype" 
+  "otf" "opentype" 
+}}
+{{ with index $irregular $format }}
+  {{ $format = . }}
+{{ end }}
+
+{{ return $format }}

core/fonts/private/GetPreloadTags.html

@@ -0,0 +1,41 @@
+{{/*
+  huge/fonts/private/GetPreloadTags
+  Construct the tags data based on preload settings.
+
+  @author @regisphilibert
+
+  @context Any (.)
+
+  @access private
+
+  @returns Slice of Maps (complying to https://github.com/theNewDynamic/hugo-module-tnd-tags/blob/main/README.md)
+
+  @uses
+     - huge/fonts/private/GetFonts
+     - huge/fonts/private/GetFormat
+*/}}
+{{ $tags := slice }}
+{{/* We list all the fonts in order to produce the data for the "prefetch" tags on all its required files */}}
+{{ range partialCached "huge/fonts/private/GetFonts" "GetFonts" }}
+{{/* We want to print <link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin> */}}
+  {{ range .resources }}
+    {{ $format := partialCached "huge/fonts/private/GetFormat" . .MediaType.SubType }}
+    {{/* For now it makes sens to restrict preload to the most supported file format.
+        Future release will allow other file formats to be preloaded.
+      */}}
+    {{ if eq $format "woff2" }}
+      {{ $tag := dict
+        "name" "link"
+        "attr" (dict
+          "href" .RelPermalink
+          "as" "font"
+          "type" "font/woff2"
+          "rel" "preload"
+          "crossorigin" "anonymous"
+      )}}
+      {{ $tags = $tags | append $tag }}
+    {{ end }}
+  {{ end }}
+{{ end }}
+
+{{ return $tags }}

core/fonts/private/GetTags.html

@@ -17,6 +17,16 @@
 {{ $tags := slice }}
 {{ $config := partialCached "huge/config/Get" "fonts" "fonts" }}
 
+
+{{/* Preload default is "always" */}}
+{{ $preload := $config.preload | default "always" }}
+{{ if partialCached "huge/env/When" $preload $preload }}
+  {{ with partial "huge/fonts/private/GetPreloadTags" }}
+    {{ $tags = $tags | append . }}
+  {{ end }}
+{{ end }}
+
+
 {{/* We generate a resource from Template (to facilitate future manipulation/http request) */}}
 {{ $fontface := resources.Get "/huge_only/fontface.css" | resources.ExecuteAsTemplate "fontface.css" "no_context" }}
 {{/* Add the tag with Resource's .Content for "inner" */}}
@@ -26,23 +36,4 @@
 }} 
 {{ $tags = $tags | append $fontface_tag }}
 
-{{/* If prefetching is enabled on the package's config */}}
-{{ $prefetch := $config.prefetch | default "always" }}
-{{ if partialCached "huge/env/When" $prefetch $prefetch }}
-  {{/* We list all the fonts in order to produce the data for the "prefetch" tags on all its required files */}}
-  {{ range partialCached "huge/fonts/private/GetFonts" "GetFonts" }}
-    {{ range .resources }}
-      {{ $tag := dict
-        "name" "link"
-        "attr" (dict
-          "href" .RelPermalink
-          "as" "font"
-          "crossorigin" " "
-          "rel" "prefetch"
-      )}}
-      {{ $tags = $tags | append $tag }}
-    {{ end }}
-  {{ end }}
-{{ end }}
-
 {{ return $tags }}

core/fonts/private/ParseFont.html

@@ -26,7 +26,10 @@
 {{ $font := . }}
 {{ with .file }}
   {{ with resources.Match (print "/" . ".*") }}
-    {{ $font = merge $font (dict "resources" .) }}
+    {{/* This ensures woff2 and woff are declared first, it seems we can't realy rely on SubType (cloufflare as '' for woff2...) */}}
+    {{ with sort . "Name" "desc" }}
+      {{ $font = merge $font (dict "resources" (sort . "Name" "desc")) }}
+    {{ end }}
   {{ else }}
   {{ partial "huge/console/warn" (printf "We did not find matching font files for basename `%s`.\nFont files should be added to the project's `assets` directory and match the relative path set in the font's settings." .) }}
   {{ end }}

core/fonts/private/ParseFontface.html

@@ -34,11 +34,7 @@
     {{ end }}
 
     {{ range . }}
-      {{ $format := .MediaType.SubType }}
-      {{ $irregular := dict "vnd.ms-fontobject" "embedded-opentype" "ttf" "truetype" "font-sfnt" "truetype" "otf" "opentype" }}
-      {{ with index $irregular $format }}
-        {{ $format = . }}
-      {{ end }}
+      {{ $format := partialCached "huge/fonts/private/GetFormat" . .MediaType.SubType }}
       {{ $css_srcs = $css_srcs | append (printf `url("%s") format("%s")` .RelPermalink $format) }}
     {{ end }}
     {{ with $css_srcs }}
@@ -62,6 +58,7 @@
 {{ range $properties }}
   {{ $properties = $properties | append (print "font-" .) }}
 {{ end }}
+
 {{ range $property := $properties }}
   {{ with index $ . }}
     {{ $key := $property }}
@@ -73,4 +70,8 @@
   {{ end }}
 {{ end }}
 
+{{ if not (index ($s.Get "font") "font-display") }}
+  {{ $s.SetInMap "font" "font-display" "swap" }}
+{{ end }}
+
 {{ return $s.Get "font" }}