From 0cefe05973cee0ea925a61e0d9cb8998c6ba25da Mon Sep 17 00:00:00 2001
From: Andrew Doering <delize@users.noreply.github.com>
Date: Tue, 17 Feb 2026 18:03:53 +0100
Subject: [PATCH] fix: preload Google Fonts to reduce layout shift (#1215)

* fix: preload Google Fonts to reduce layout shift

Move font loading from footer JS to head with preconnect and preload
hints. This reduces CLS by ensuring fonts load earlier in the page
lifecycle instead of being dynamically inserted after footer loads.

* style: reorder custom font inclusion in head template

---------

Co-authored-by: delize <4028612+delize@users.noreply.github.com>
Co-authored-by: Jimmy Cai <jimmy@cai.im>
---
 layouts/_partials/footer/components/custom-font.html | 11 -----------
 layouts/_partials/footer/include.html                |  1 -
 layouts/_partials/head/custom-font.html              |  4 ++++
 layouts/_partials/head/head.html                     |  1 +
 4 files changed, 5 insertions(+), 12 deletions(-)
 delete mode 100644 layouts/_partials/footer/components/custom-font.html
 create mode 100644 layouts/_partials/head/custom-font.html

diff --git a/layouts/_partials/footer/components/custom-font.html b/layouts/_partials/footer/components/custom-font.html
deleted file mode 100644
index 8e2ff37..0000000
--- a/layouts/_partials/footer/components/custom-font.html
+++ /dev/null
@@ -1,11 +0,0 @@
-<script>
-    (function () {
-        const customFont = document.createElement('link');
-        customFont.href = "https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700&display=swap";
-
-        customFont.type = "text/css";
-        customFont.rel = "stylesheet";
-
-        document.head.appendChild(customFont);
-    }());
-</script>
\ No newline at end of file
diff --git a/layouts/_partials/footer/include.html b/layouts/_partials/footer/include.html
index 4b50a88..b4c0b99 100644
--- a/layouts/_partials/footer/include.html
+++ b/layouts/_partials/footer/include.html
@@ -1,3 +1,2 @@
 {{ partialCached "footer/components/script.html" . }}
-{{ partialCached "footer/components/custom-font.html" . }}
 {{ partial "footer/custom.html" . }}
\ No newline at end of file
diff --git a/layouts/_partials/head/custom-font.html b/layouts/_partials/head/custom-font.html
new file mode 100644
index 0000000..8ab9cb2
--- /dev/null
+++ b/layouts/_partials/head/custom-font.html
@@ -0,0 +1,4 @@
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link rel="preload" as="style" href="https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700&display=swap">
+<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700&display=swap">
diff --git a/layouts/_partials/head/head.html b/layouts/_partials/head/head.html
index dbe85c2..9f01e48 100644
--- a/layouts/_partials/head/head.html
+++ b/layouts/_partials/head/head.html
@@ -10,6 +10,7 @@
 
 <link rel='canonical' href='{{ .Permalink }}'>
 
+{{- partial "head/custom-font.html" . -}}
 {{- partial "head/style.html" . -}}
 {{- partial "head/script.html" . -}}
 {{- partial "head/opengraph/include.html" . -}}