font lazy load

1 files changed, 19 insertions, 3 deletions

diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 5229cac..9b488bd 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -8,6 +8,17 @@
   let { children } = $props();
 
   onMount(() => {
+    const loadFonts = () => {
+      if (document.querySelector('link[data-app-fonts="true"]')) return;
+
+      const link = document.createElement("link");
+      link.rel = "stylesheet";
+      link.href =
+        "https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap";
+      link.setAttribute("data-app-fonts", "true");
+      document.head.appendChild(link);
+    };
+
     const loadAnalytics = () => {
       if (document.querySelector('script[data-goatcounter-script="true"]'))
         return;
@@ -21,13 +32,18 @@
       document.head.appendChild(script);
     };
 
+    const runDeferredLoads = () => {
+      loadFonts();
+      loadAnalytics();
+    };
+
     if (document.readyState === "complete") {
-      window.setTimeout(loadAnalytics, 0);
+      window.setTimeout(runDeferredLoads, 0);
       return;
     }
 
-    window.addEventListener("load", loadAnalytics, { once: true });
-    return () => window.removeEventListener("load", loadAnalytics);
+    window.addEventListener("load", runDeferredLoads, { once: true });
+    return () => window.removeEventListener("load", runDeferredLoads);
   });
 </script>