From b4f9b65f1df4c400f22b28f20e1304ec57279d33 Mon Sep 17 00:00:00 2001
From: Luca <102960244+Luca-Timo@users.noreply.github.com>
Date: Mon, 4 May 2026 19:44:20 +0200
Subject: [PATCH] feat(branding): preview each font in its own face in the
 picker dropdown

---
 .../admin/ThemeCustomizerEnhanced.tsx         | 48 +++++++++++++++----
 1 file changed, 38 insertions(+), 10 deletions(-)

diff --git a/frontend/src/components/admin/ThemeCustomizerEnhanced.tsx b/frontend/src/components/admin/ThemeCustomizerEnhanced.tsx
index b4136774..022c93a6 100644
--- a/frontend/src/components/admin/ThemeCustomizerEnhanced.tsx
+++ b/frontend/src/components/admin/ThemeCustomizerEnhanced.tsx
@@ -146,6 +146,28 @@ export const ThemeCustomizerEnhanced: React.FC<ThemeCustomizerEnhancedProps> = (
     staleTime: 5 * 60 * 1000,
   });
 
+  // Preload the lightest weight of every available family so each <option>
+  // in the font dropdowns can render in its own face. Total payload is small
+  // (~80 KB per family × 8 families ≈ 600 KB), cached 7 days by the static
+  // handler. Browser de-dups @font-face blocks across <style> elements, so
+  // overlap with ThemeContext's lazy-injection on the active family is fine.
+  useEffect(() => {
+    if (!availableFonts || availableFonts.length === 0) return;
+    const styleId = 'theme-customizer-font-previews';
+    let styleEl = document.getElementById(styleId) as HTMLStyleElement | null;
+    if (!styleEl) {
+      styleEl = document.createElement('style');
+      styleEl.id = styleId;
+      document.head.appendChild(styleEl);
+    }
+    const blocks = availableFonts.map((f) => {
+      const folder = f.family.replace(/ /g, '-');
+      const weight = f.weights.includes(400) ? 400 : f.weights[0];
+      return `@font-face{font-family:'${f.family}';font-style:normal;font-weight:${weight};font-display:swap;src:url('/fonts/${encodeURIComponent(folder)}/${weight}.woff2') format('woff2');}`;
+    });
+    styleEl.textContent = blocks.join('\n');
+  }, [availableFonts]);
+
   const thumbnailWidth = parseInt(allSettings?.thumbnail_width) || 300;
   const thumbnailHeight = parseInt(allSettings?.thumbnail_height) || 300;
   const isBetaLayout = BETA_LAYOUTS.includes(localTheme.galleryLayout as GalleryLayoutType);
@@ -984,11 +1006,14 @@ export const ThemeCustomizerEnhanced: React.FC<ThemeCustomizerEnhancedProps> = (
                 className="w-full px-3 py-2 border border-neutral-300 dark:border-neutral-600 rounded-lg bg-white dark:bg-neutral-800 text-neutral-900 dark:text-neutral-100"
               >
                 <option value="system-ui, sans-serif">System UI</option>
-                {(availableFonts || []).map((f) => (
-                  <option key={f.family} value={buildFontFamilyValue(f.family)}>
-                    {f.family}
-                  </option>
-                ))}
+                {(availableFonts || []).map((f) => {
+                  const cssValue = buildFontFamilyValue(f.family);
+                  return (
+                    <option key={f.family} value={cssValue} style={{ fontFamily: cssValue }}>
+                      {f.family}
+                    </option>
+                  );
+                })}
               </select>
             </div>
 
@@ -1007,11 +1032,14 @@ export const ThemeCustomizerEnhanced: React.FC<ThemeCustomizerEnhancedProps> = (
               >
                 <option value="">{t('branding.sameAsBody')}</option>
                 <option value="system-ui, sans-serif">System UI</option>
-                {(availableFonts || []).map((f) => (
-                  <option key={f.family} value={buildFontFamilyValue(f.family)}>
-                    {f.family}
-                  </option>
-                ))}
+                {(availableFonts || []).map((f) => {
+                  const cssValue = buildFontFamilyValue(f.family);
+                  return (
+                    <option key={f.family} value={cssValue} style={{ fontFamily: cssValue }}>
+                      {f.family}
+                    </option>
+                  );
+                })}
               </select>
             </div>
           </div>