Refactor font loading script to improve FOUT handling

Update the font loading logic to add a 'fonts-loading' class to the HTML element, ensuring content remains hidden until fonts are fully loaded. Adjust timeout settings for better performance and error handling during font loading, enhancing user experience.

Author: julioest

antora-ui/src/partials/head-fonts.hbs

@@ -1,5 +1,5 @@
-
-<style>html{visibility:hidden;opacity:0}</style>
+<style>html.fonts-loading{visibility:hidden;opacity:0}</style>
+<script>document.documentElement.classList.add('fonts-loading');</script>
 
 <link rel="preload" href="{{{uiRootPath}}}/font/NotoSansDisplay.woff2" as="font" type="font/woff2" crossorigin="anonymous" />
 <link rel="preload" href="{{{uiRootPath}}}/font/NotoSansDisplay-Italic.woff2" as="font" type="font/woff2" crossorigin="anonymous" />
@@ -10,27 +10,21 @@
 (function() {
   'use strict';
   
-  // Fallback: show page after max timeout no matter what
-  var MAX_WAIT = 3000;
   var revealed = false;
   
   var reveal = function() {
     if (revealed) return;
     revealed = true;
-    document.documentElement.style.visibility = '';
-    document.documentElement.style.opacity = '';
+    document.documentElement.classList.remove('fonts-loading');
   };
   
-  // Safety timeout - never block page forever
-  setTimeout(reveal, MAX_WAIT);
+  setTimeout(reveal, 3000);
   
-  // If FontFace API not supported, just wait a bit and show
   if (!('FontFace' in window) || !('fonts' in document)) {
-    setTimeout(reveal, 500);
+    setTimeout(reveal, 100);
     return;
   }
   
-  // Define ALL fonts we need to load
   var uiRoot = '{{{uiRootPath}}}';
   var fonts = [
     { 
@@ -55,23 +49,25 @@
     }
   ];
   
-  // Load all fonts via FontFace API
   var loadPromises = fonts.map(function(f) {
-    var face = new FontFace(f.family, 'url("' + f.url + '")', f.descriptors);
-    return face.load().then(function(loaded) {
-      document.fonts.add(loaded);
-      return loaded;
-    });
+    try {
+      var face = new FontFace(f.family, 'url("' + f.url + '")', f.descriptors);
+      return face.load().then(function(loaded) {
+        document.fonts.add(loaded);
+        return loaded;
+      }).catch(function() {
+        return null;
+      });
+    } catch (e) {
+      return Promise.resolve(null);
+    }
   });
   
   Promise.all(loadPromises)
     .then(function() {
       return document.fonts.ready;
     })
     .then(reveal)
-    .catch(function(err) {
-      console.warn('Font loading error:', err);
-      reveal();
-    });
+    .catch(reveal);
 })();
 </script>