[DOC] preload font

Author: SimonBlanke

docs/source/_static/css/custom.css

@@ -1,10 +1,8 @@
 /* Custom CSS for Hyperactive documentation */
 /* Purple/Violet theme matching the Hyperactive logo */
 
-/* ============================================
-   Google Font Import for Hero Title
-   ============================================ */
-@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@300;400;600;700&display=swap');
+/* NOTE: Raleway font is loaded via layout.html with preload for better performance.
+   This prevents the Flash of Unstyled Text (FOUT) on the hero title. */
 
 /* ============================================
    PyData Theme Color Overrides (purple theme)

docs/source/_templates/layout.html

@@ -3,4 +3,10 @@
 {% block extrahead %}
 {{ super() }}
 <meta name="python-version-range" content="{{ python_version_range }}">
+<!-- Preconnect to Google Fonts for faster font loading -->
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<!-- Preload Raleway font to prevent FOUT (Flash of Unstyled Text) -->
+<link rel="preload" href="https://fonts.googleapis.com/css2?family=Raleway:wght@300;400;600;700&display=swap" as="style" onload="this.onload=null;this.rel='stylesheet'">
+<noscript><link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Raleway:wght@300;400;600;700&display=swap"></noscript>
 {% endblock %}