diff --git a/css/fonts.css b/css/fonts.css
index 13bd2af..ce31958 100644
--- a/css/fonts.css
+++ b/css/fonts.css
@@ -229,6 +229,14 @@ body {
     font-family: "BodySans", sans-serif;
 }
 
+.js-wait body {
+    visibility: hidden;
+}
+
+.js-ready body {
+    visibility: visible;
+}
+
 h1 {
     font-family: "Heading";
     line-height: 1.2;
diff --git a/shared_templates/main.html b/shared_templates/main.html
index 055aa8d..702855e 100644
--- a/shared_templates/main.html
+++ b/shared_templates/main.html
@@ -4,6 +4,16 @@
   <meta charset="utf-8">
   <title> <!-- set automatically, see soupault.conf --> </title>
   <meta name="viewport" content="width=device-width, initial-scale=1">
+
+  <script>
+    document.documentElement.classList.add("js-wait");
+  </script>
+  <script>
+    const class_ = `font-${window.devicePixelRatio > 1.5 ? 'hidpi' : 'lodpi'}`;
+    document.documentElement.classList.add(class_);
+    // document.documentElement.className += ' invert'; // 'invert' to swap colors
+  </script>
+
   <link rel="stylesheet" href="/css/fonts.css">
   <link rel="stylesheet" href="/css/layout.css">
   <link rel="stylesheet" href="/css/looks.css">
@@ -11,11 +21,6 @@
   <link rel="stylesheet" href="/css/code.css">
   <link rel="icon" type="image/png" href="/assets/favicon.png">
   <script>
-    const class_ = `font-${window.devicePixelRatio > 1.5 ? 'hidpi' : 'lodpi'}`;
-    document.documentElement.className = class_;
-    // document.documentElement.className += ' invert'; // 'invert' to swap colors
-  </script>
-  <script defer>
     function fitH1ToContainer(h1) {
       const container = h1.closest(".container");
       if (!container || window.devicePixelRatio > 2) return;
@@ -74,11 +79,13 @@
         });
 
         runFitText();
+        document.documentElement.classList.add("js-ready");
         window.addEventListener("resize", runFitText);
       });
     }
 
     window.addEventListener("DOMContentLoaded", start);
+
   </script>
 
 </head>