fix: preload fonts

website/docusaurus.config.ts

@@ -93,6 +93,35 @@ export default async function createConfigAsync(): Promise<Config> {
             metadata: [
                 { name: 'og:image:width', content: '1200' },
                 { name: 'og:image:height', content: '630' },
+                // Resource hints for LCP optimization
+                { name: 'preconnect', href: 'https://fonts.googleapis.com' },
+                { name: 'preconnect', href: 'https://fonts.gstatic.com', crossOrigin: 'anonymous' },
+            ],
+            headTags: [
+                {
+                    tagName: 'link',
+                    attributes: {
+                        rel: 'preconnect',
+                        href: 'https://fonts.googleapis.com',
+                    },
+                },
+                {
+                    tagName: 'link',
+                    attributes: {
+                        rel: 'preconnect',
+                        href: 'https://fonts.gstatic.com',
+                        crossorigin: 'anonymous',
+                    },
+                },
+                {
+                    tagName: 'link',
+                    attributes: {
+                        rel: 'preload',
+                        href: '/img/unleash_logo_dark.svg',
+                        as: 'image',
+                        type: 'image/svg+xml',
+                    },
+                },
             ],
             navbar: {
                 logo: {

website/src/css/critical.css

@@ -2,6 +2,9 @@
 /* Only includes above-the-fold styles needed for initial paint */
 /* This CSS should not conflict with main styles - only prevent layout shift */
 
+/* Import Google Fonts with optimal loading */
+@import url('https://fonts.googleapis.com/css2?family=Sen:wght@400;600;700&display=swap');
+
 /* Prevent layout shift - reserve space */
 html, body {
     margin: 0;

website/src/theme/Root.tsx

@@ -1,5 +1,6 @@
 import React, { useEffect } from 'react';
 import ExecutionEnvironment from '@docusaurus/ExecutionEnvironment';
+import LCPOptimizer from './LCPOptimizer';
 // import OptimizedStyles from './OptimizedStyles';
 // import FontLoader from './FontLoader';
 // import LayoutStabilizer from './LayoutStabilizer';
@@ -97,7 +98,10 @@ export default function Root({ children }: { children: React.ReactNode }) {
                 data-critical='true'
             />
 
-            {/* Performance optimization components disabled to prevent style conflicts */}
+            {/* LCP-focused performance optimization */}
+            <LCPOptimizer />
+            
+            {/* Other performance optimization components disabled to prevent style conflicts */}
             {/* <OptimizedStyles /> */}
             {/* <FontLoader /> */}
             {/* <LayoutStabilizer /> */}