diff --git a/layouts/partials/site_head.html b/layouts/partials/site_head.html
index 29c6a6be..189f8443 100644
--- a/layouts/partials/site_head.html
+++ b/layouts/partials/site_head.html
@@ -95,8 +95,9 @@
   {{ end }}
 
   {{/* We cannot use SRI with Google Fonts because the CSS is dynamically generated according to the user agent. */}}
+  {{/* Hugo's htmlEscape cannot escape "|" in Google Font URIs so we implement our own escape functionality. */}}
   {{ with ($scr.Get "google_fonts") }}
-  <link rel="stylesheet" {{ printf "href=\"https://fonts.googleapis.com/css?family=%s&display=swap\"" (htmlEscape .) | safeHTMLAttr }}>
+  <link rel="stylesheet" {{ printf "href=\"https://fonts.googleapis.com/css?family=%s&display=swap\"" . | replaceRE "\\|" "%7C" | safeHTMLAttr }}>
   {{ end }}
 
   {{ $css_options := (dict "targetPath" "css/academic.css" "outputStyle" "compressed") }}
diff --git a/layouts/shortcodes/figure.html b/layouts/shortcodes/figure.html
index 6e454624..95dcdcab 100644
--- a/layouts/shortcodes/figure.html
+++ b/layouts/shortcodes/figure.html
@@ -12,7 +12,7 @@
 {{ else if .Get "link"}}
   <a href="{{ .Get "link" }}"{{ with .Get "target" }} target="{{.}}"{{ end }}{{ with .Get "rel" }} rel="{{.}}"{{ end }}>
 {{ end }}
-<img src="{{$image_src}}" {{ if or (.Get "alt") (.Get "caption") }}alt="{{ with .Get "alt"}}{{.}}{{else}}{{ .Get "caption" }}{{ end }}" {{ end }}{{ with .Get "width" }}width="{{.}}" {{ end }}{{ with .Get "height" }}height="{{.}}" {{ end }}>
+<img src="{{$image_src}}" alt="{{ if or (.Get "alt") (.Get "caption") }}{{ with .Get "alt"}}{{.}}{{else}}{{ .Get "caption" }}{{ end }}{{ end }}" {{ with .Get "width" }}width="{{.}}" {{ end }}{{ with .Get "height" }}height="{{.}}" {{ end }}>
 {{ if or $lightbox (.Get "link") }}</a>{{ end }}
 {{ if or (or (.Get "title") (.Get "caption")) (.Get "attr")}}
 {{ $figure := split (i18n "figure" | default "Figure %d:") "%d" }}