From f410207b2d7ddf1c9525603c7dcbb7cdfee1729b Mon Sep 17 00:00:00 2001
From: Luca <102960244+Luca-Timo@users.noreply.github.com>
Date: Mon, 4 May 2026 20:39:00 +0200
Subject: [PATCH] revert(branding): per-option font preview (defer to
 follow-up)

---
 docs/fonts.md                                 |  1 +
 .../admin/ThemeCustomizerEnhanced.tsx         | 48 ++++---------------
 2 files changed, 11 insertions(+), 38 deletions(-)

diff --git a/docs/fonts.md b/docs/fonts.md
index 5c14fdd2..430ecad8 100644
--- a/docs/fonts.md
+++ b/docs/fonts.md
@@ -82,6 +82,7 @@ Refresh the admin customizer; the new family appears in the body and heading dro
 - **Removing the `Inter/` folder** → the very-first-paint bootstrap CSS in `index.css` will 404 the font requests; browsers fall back to the next family in `--font-family` (Noto Sans → system-ui). Cosmetic only; no other breakage.
 - **Variable fonts** are not supported in v1. Each weight must be a separate file.
 - **Italics** are not exposed in the picker.
+- **Per-option dropdown previews** (each font name rendered in its own face inside the picker) are not supported in v1. Browser support for styling `<option>` elements is inconsistent — Safari ignores it in the popup entirely, and Chrome/Firefox were unreliable in testing. A future improvement is to replace the native `<select>` with a custom dropdown component or to render a separate "preview text" box below the picker.
 
 ## License
 
diff --git a/frontend/src/components/admin/ThemeCustomizerEnhanced.tsx b/frontend/src/components/admin/ThemeCustomizerEnhanced.tsx
index 022c93a6..b4136774 100644
--- a/frontend/src/components/admin/ThemeCustomizerEnhanced.tsx
+++ b/frontend/src/components/admin/ThemeCustomizerEnhanced.tsx
@@ -146,28 +146,6 @@ 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);
@@ -1006,14 +984,11 @@ 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) => {
-                  const cssValue = buildFontFamilyValue(f.family);
-                  return (
-                    <option key={f.family} value={cssValue} style={{ fontFamily: cssValue }}>
-                      {f.family}
-                    </option>
-                  );
-                })}
+                {(availableFonts || []).map((f) => (
+                  <option key={f.family} value={buildFontFamilyValue(f.family)}>
+                    {f.family}
+                  </option>
+                ))}
               </select>
             </div>
 
@@ -1032,14 +1007,11 @@ export const ThemeCustomizerEnhanced: React.FC<ThemeCustomizerEnhancedProps> = (
               >
                 <option value="">{t('branding.sameAsBody')}</option>
                 <option value="system-ui, sans-serif">System UI</option>
-                {(availableFonts || []).map((f) => {
-                  const cssValue = buildFontFamilyValue(f.family);
-                  return (
-                    <option key={f.family} value={cssValue} style={{ fontFamily: cssValue }}>
-                      {f.family}
-                    </option>
-                  );
-                })}
+                {(availableFonts || []).map((f) => (
+                  <option key={f.family} value={buildFontFamilyValue(f.family)}>
+                    {f.family}
+                  </option>
+                ))}
               </select>
             </div>
           </div>