feat(branding): self-hosted webfonts with filesystem scanner

backend/assets/fonts/LICENSE-OFL.txt

@@ -0,0 +1,114 @@
+This directory bundles the following typefaces, each licensed under the
+SIL Open Font License v1.1.
+------------------------------------------------------------
+Per-font copyright notices
+------------------------------------------------------------
+Inter
+Copyright (c) 2016 The Inter Project Authors (https://github.com/rsms/inter)
+Noto Sans
+Copyright 2022 The Noto Project Authors (https://github.com/notofonts/latin-greek-cyrillic)
+Poppins
+Copyright 2020 The Poppins Project Authors (https://github.com/itfoundry/Poppins)
+Jost
+Copyright 2020 The Jost Project Authors (https://github.com/indestructible-type/Jost)
+Montserrat
+Copyright 2011 The Montserrat Project Authors (https://github.com/JulietaUla/Montserrat)
+Playfair Display
+Copyright 2017 The Playfair Display Project Authors (https://github.com/clauseggers/Playfair)
+IBM Plex Sans
+Copyright © 2017 IBM Corp. with Reserved Font Name "Plex"
+Comic Neue
+Copyright (c) 2014 by Craig Rozynski. All rights reserved.
+
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+https://openfontlicense.org
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded,
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.

backend/server.js

@@ -449,6 +449,27 @@ app.use('/thumbnails', require('./src/middleware/photoAuth'), setCorsHeaders, se
 // Static file serving for uploads (public - logos, favicons)
 app.use('/uploads', setCorsHeaders, secureStatic(path.join(storagePath, 'uploads')));
 
+// Static file serving for self-hosted webfonts (public — gallery visitors
+// load these via @font-face). Replaces the previous Google Fonts CDN
+// dependency, which leaked visitor IPs to a third party (LG München 2022
+// GDPR ruling).
+//
+// Two mounts in priority order:
+//   1. STORAGE_PATH/fonts/ — runtime user additions (drop a folder, restart)
+//   2. backend/assets/fonts/ — bundled defaults baked into the image
+// Express evaluates handlers in order, so user-supplied files win on overlap.
+const fontStaticOpts = { maxAge: '7d', immutable: true };
+app.use(
+  '/fonts',
+  setCorsHeaders,
+  secureStatic(path.join(storagePath, 'fonts'), fontStaticOpts)
+);
+app.use(
+  '/fonts',
+  setCorsHeaders,
+  secureStatic(path.resolve(__dirname, 'assets/fonts'), fontStaticOpts)
+);
+
 // Debug endpoint to check IP detection (only in development)
 if (process.env.NODE_ENV === 'development') {
   app.get('/api/debug/ip', (req, res) => {
@@ -563,6 +584,7 @@ app.use('/api/v1', require('./src/routes/v1/events'));
 
 app.use('/api/invite', require('./src/routes/acceptInvite'));
 app.use('/api/public/settings', require('./src/routes/publicSettings'));
+app.use('/api/public/fonts', require('./src/routes/publicFonts'));
 app.use('/api/public', require('./src/routes/publicCMS'));
 app.use('/api/images', require('./src/routes/protectedImages'));
 app.use('/api/secure-images', secureImagesRoutes);

backend/src/routes/publicFonts.js

@@ -0,0 +1,24 @@
+const express = require('express');
+const { listFonts } = require('../services/fontsService');
+const logger = require('../utils/logger');
+
+const router = express.Router();
+
+/**
+ * GET /api/public/fonts
+ *
+ * Returns the list of self-hosted font families discovered under
+ * STORAGE_PATH/fonts/. No authentication — gallery visitors need this
+ * to render the chosen theme font.
+ */
+router.get('/', async (req, res) => {
+  try {
+    const fonts = await listFonts();
+    res.json({ fonts });
+  } catch (error) {
+    logger.error('Failed to list fonts', { error: error.message });
+    res.status(500).json({ error: 'Failed to list fonts' });
+  }
+});
+
+module.exports = router;

backend/src/services/fontsService.js

@@ -0,0 +1,172 @@
+const fs = require('fs').promises;
+const path = require('path');
+const logger = require('../utils/logger');
+
+/**
+ * Filesystem-driven font scanner.
+ *
+ * Scans two locations for self-hosted webfonts and merges the results:
+ *
+ *   1. backend/assets/fonts/  — bundled defaults shipped with the repo
+ *      and baked into the Docker image. Visitors get a working font
+ *      picker out of the box, no external CDN, no GDPR exposure.
+ *
+ *   2. STORAGE_PATH/fonts/    — optional runtime additions. Admins drop
+ *      a folder here (via Docker volume / SFTP) and the family appears
+ *      in the picker after the cache TTL expires or the backend restarts.
+ *      User additions WIN over bundled defaults of the same family name —
+ *      this lets a deployment override e.g. with extra weights or a newer
+ *      version without forking the repo.
+ *
+ * Folder layout in either location:
+ *
+ *   <Family-Name>/<weight>.woff2
+ *
+ *   - Folder name → display family with hyphens replaced by spaces:
+ *       "Playfair-Display" → "Playfair Display"
+ *   - Weight files must be named "<integer>.woff2" (e.g. 400.woff2).
+ *     Other names are ignored, family entry still includes its other weights.
+ *
+ * Result is cached in memory for FONTS_CACHE_TTL_MS so frequent
+ * /api/public/fonts hits don't hit disk per request. New folders dropped
+ * into a mount become visible after the TTL or on backend restart.
+ *
+ * Pattern mirrors backend/src/services/uploadSettings.js.
+ */
+
+const FONTS_CACHE_TTL_MS = 30_000;
+
+let cachedFonts = null;
+let fontsCacheExpiresAt = 0;
+
+function getBundledFontsRoot() {
+  // backend/src/services/fontsService.js → backend/assets/fonts
+  return path.resolve(__dirname, '../../assets/fonts');
+}
+
+function getUserFontsRoot() {
+  const storagePath = process.env.STORAGE_PATH || path.join(__dirname, '../../../storage');
+  return path.join(storagePath, 'fonts');
+}
+
+function familyDisplayName(folderName) {
+  return folderName.replace(/-/g, ' ');
+}
+
+/**
+ * Read one family folder and return { family, weights } or null if the
+ * folder has no usable .woff2 files.
+ */
+async function readFamilyFolder(rootAbs, folderName) {
+  const folderAbs = path.join(rootAbs, folderName);
+  let entries;
+  try {
+    entries = await fs.readdir(folderAbs, { withFileTypes: true });
+  } catch (err) {
+    logger.warn(`[fonts] Could not read family folder ${folderName} in ${rootAbs}: ${err.message}`);
+    return null;
+  }
+
+  const weights = [];
+  for (const entry of entries) {
+    if (!entry.isFile()) continue;
+    if (!entry.name.toLowerCase().endsWith('.woff2')) continue;
+    const stem = entry.name.slice(0, -'.woff2'.length);
+    if (!/^\d+$/.test(stem)) continue; // ignore non-numeric weight names
+    const weight = parseInt(stem, 10);
+    if (weight < 1 || weight > 1000) continue;
+    weights.push(weight);
+  }
+
+  if (weights.length === 0) {
+    logger.warn(`[fonts] Skipping ${folderName} in ${rootAbs}: no usable <weight>.woff2 files`);
+    return null;
+  }
+
+  weights.sort((a, b) => a - b);
+  return { family: familyDisplayName(folderName), weights };
+}
+
+/**
+ * Scan one root directory and return its families as a Map keyed by
+ * lowercased family name (for case-insensitive de-dup against the other
+ * root). Missing directory → empty Map (not an error).
+ */
+async function scanRoot(rootAbs) {
+  let entries;
+  try {
+    entries = await fs.readdir(rootAbs, { withFileTypes: true });
+  } catch (err) {
+    if (err.code === 'ENOENT') {
+      return new Map();
+    }
+    throw err;
+  }
+
+  const result = new Map();
+  for (const entry of entries) {
+    if (!entry.isDirectory()) continue;
+    if (entry.name.startsWith('.')) continue;
+
+    const family = await readFamilyFolder(rootAbs, entry.name);
+    if (!family) continue;
+
+    const lc = family.family.toLowerCase();
+    if (result.has(lc)) {
+      logger.warn(
+        `[fonts] Duplicate family ${family.family} within ${rootAbs}; ` +
+        `keeping the first encountered folder`
+      );
+      continue;
+    }
+    result.set(lc, family);
+  }
+
+  return result;
+}
+
+/**
+ * List all available font families (bundled + user additions, merged).
+ * Cached for FONTS_CACHE_TTL_MS.
+ *
+ * @returns {Promise<Array<{ family: string, weights: number[] }>>}
+ */
+async function listFonts() {
+  if (Date.now() < fontsCacheExpiresAt && cachedFonts !== null) {
+    return cachedFonts;
+  }
+
+  const bundled = await scanRoot(getBundledFontsRoot());
+  const userAdded = await scanRoot(getUserFontsRoot());
+
+  // User additions override bundled families of the same name.
+  const merged = new Map(bundled);
+  for (const [lc, family] of userAdded) {
+    if (merged.has(lc)) {
+      logger.info(
+        `[fonts] User-supplied ${family.family} overrides bundled default`
+      );
+    }
+    merged.set(lc, family);
+  }
+
+  const families = Array.from(merged.values()).sort((a, b) =>
+    a.family.localeCompare(b.family)
+  );
+
+  cachedFonts = families;
+  fontsCacheExpiresAt = Date.now() + FONTS_CACHE_TTL_MS;
+  return cachedFonts;
+}
+
+function clearFontsCache() {
+  cachedFonts = null;
+  fontsCacheExpiresAt = 0;
+}
+
+module.exports = {
+  listFonts,
+  clearFontsCache,
+  getBundledFontsRoot,
+  getUserFontsRoot
+};

docs/fonts.md

@@ -0,0 +1,90 @@
+# Self-hosted webfonts
+
+PicPeak ships with a curated set of webfonts baked into the backend image and serves them from your own origin. **No requests go to `fonts.googleapis.com` or any third-party CDN** — guest IPs stay private, which is important for GDPR compliance (LG München 2022).
+
+The font picker in the admin theme customizer is **data-driven**: whatever the backend finds on disk, the picker offers. This page documents the conventions and the workflow for adding your own families.
+
+## What ships out of the box
+
+The Docker image bundles 8 OFL-licensed families at `backend/assets/fonts/`:
+
+- Comic Neue
+- IBM Plex Sans
+- Inter (the default)
+- Jost
+- Montserrat
+- Noto Sans
+- Playfair Display
+- Poppins
+
+These appear in the admin theme customizer with no configuration.
+
+## Adding your own font (drop a folder, restart)
+
+You don't need to fork the repo. Place a font folder in your runtime storage volume — the same volume that holds events, thumbnails, etc. — and it appears in the picker after the next backend restart (or within ~30 seconds of being added, whichever comes first).
+
+### 1. Choose where on the host
+
+Bind-mount target inside the container is `/app/storage/fonts/` (the env var `STORAGE_PATH` controls the prefix; defaults to `/app/storage`). On the host, that's wherever your `docker-compose.yml` mounts `${APP_STORAGE}` from — typically `./storage/`.
+
+### 2. Folder layout
+
+```
+storage/fonts/
+└── <Family-Name>/
+    ├── 400.woff2
+    ├── 600.woff2
+    └── 700.woff2
+```
+
+Rules:
+
+- **Folder name** = display family name with spaces replaced by hyphens. The scanner turns `Roboto-Slab/` → `Roboto Slab`. Use the exact upstream family name; capitalisation is preserved.
+- **File names** are `<weight>.woff2` where `<weight>` is an integer (100-900). Other names are ignored. The picker doesn't expose individual weights, but the runtime injects all available weights in the `@font-face` block so headings (semibold/bold) render correctly.
+- **Format** must be `.woff2`. Other formats are ignored. WOFF2 is universally supported and the smallest on the wire.
+- **No italics** in v1 (the picker doesn't expose them). Italic files in the folder are silently ignored.
+
+### 3. Where to download fonts
+
+For Google-Fonts-licensed families, use [google-webfonts-helper](https://gwfh.mranftl.com/fonts):
+
+1. Pick the family.
+2. Charsets section → **Latin** only (uncheck others unless you actually need them; Cyrillic alone roughly doubles file size).
+3. Styles section → **400, 600, 700** at minimum (these match what the picker uses).
+4. Click "Download files" — you'll get a ZIP containing the `.woff2` files plus the family's OFL license.
+5. Rename the files to `400.woff2`, `600.woff2`, `700.woff2` and drop them in `storage/fonts/<Family-Name>/`.
+6. Keep the OFL license file alongside (the static handler serves anything in the folder, so `/fonts/<Family-Name>/OFL.txt` is publicly available — this satisfies OFL §2's "license must be included with all copies").
+
+For non-Google fonts, ensure you have the right to redistribute. SIL Open Font License (OFL), Apache 2.0, and most "free for commercial use" web licenses allow this.
+
+### 4. Activation
+
+Either:
+
+- **Restart the backend container** (immediate), or
+- **Wait ~30 seconds** for the in-memory cache to expire and the next `/api/public/fonts` request to re-scan.
+
+Refresh the admin customizer; the new family appears in the body and heading dropdowns.
+
+## How it works
+
+- **Scanner**: `backend/src/services/fontsService.js` reads two locations and merges them: `backend/assets/fonts/` (bundled) + `STORAGE_PATH/fonts/` (user). User additions override bundled families of the same name. Cached for 30 s.
+- **Listing endpoint**: `GET /api/public/fonts` returns `{ fonts: [{ family, weights }, ...] }`.
+- **Static serving**: `GET /fonts/<Family-Name>/<weight>.woff2` returns the actual file. Path-traversal protected. `Cache-Control: max-age=7d, immutable`.
+- **Lazy injection**: `frontend/src/contexts/ThemeContext.tsx` watches `theme.fontFamily` / `theme.headingFontFamily` and injects exactly one `@font-face` block per family the page actually uses, into a single `<style id="self-hosted-fonts">` element. Other families are not loaded for that visitor.
+- **Bootstrap**: `frontend/src/index.css` ships static `@font-face` blocks for Inter so the very first paint already has the default body font.
+
+## Caveats and edge cases
+
+- **Empty folder** (no `<weight>.woff2` files) → silently skipped, warning in backend logs.
+- **Two folders that normalize to the same family** on case-insensitive filesystems (macOS APFS) → second is skipped, warning logged.
+- **Weight files with non-numeric names** (e.g. `bold.woff2`, `regular.woff2`) → ignored; family entry still includes its other weights.
+- **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.
+
+## License
+
+The bundled fonts are all SIL Open Font License v1.1 (OFL). The license text and per-font copyright notices live at `backend/assets/fonts/LICENSE-OFL.txt` and are publicly served at `/fonts/LICENSE-OFL.txt`.
+
+If you redistribute the PicPeak Docker image, you redistribute these fonts too — you must keep the LICENSE-OFL.txt file accessible. The default static handler does this for you.

frontend/src/components/admin/ThemeCustomizerEnhanced.tsx

@@ -4,9 +4,47 @@ import { Button, Card, Input } from '../common';
 import { ThemeConfig, GALLERY_THEME_PRESETS, GalleryLayoutType, HeaderStyleType, HeroDividerStyle } from '../../types/theme.types';
 import type { EnabledTemplate } from '../../services/cssTemplates.service';
 import { settingsService } from '../../services/settings.service';
+import { fontsService, extractFamilyName, type FontDefinition } from '../../services/fonts.service';
 import { useQuery } from '@tanstack/react-query';
 import { useTranslation } from 'react-i18next';
 
+// Generic CSS fallback per family. Sans by default; serif for known serif
+// families; cursive for handwriting/display families. Used when building
+// the dropdown <option value> from a scanned family name.
+const SERIF_FAMILIES = new Set(['Playfair Display', 'Georgia']);
+const CURSIVE_FAMILIES = new Set(['Comic Neue']);
+
+function buildFontFamilyValue(family: string): string {
+  const generic = SERIF_FAMILIES.has(family)
+    ? 'serif'
+    : CURSIVE_FAMILIES.has(family)
+      ? 'cursive'
+      : 'sans-serif';
+  // Always quote the family name (covers multi-word like 'Playfair Display').
+  return `'${family}', ${generic}`;
+}
+
+/**
+ * Match a saved CSS font-family string against the available scanned families
+ * and return the canonical option value the dropdown renders. Handles both
+ * legacy unquoted strings ("Inter, sans-serif") and the new quoted format
+ * ("'Inter', sans-serif"), so events saved before this change still show the
+ * right option as selected.
+ */
+function resolveFontDropdownValue(
+  saved: string | undefined,
+  available: FontDefinition[] | undefined,
+  fallback: string
+): string {
+  if (!saved) return fallback;
+  const family = extractFamilyName(saved);
+  if (!family) return saved; // generic family like "system-ui, sans-serif"
+  const match = (available || []).find(
+    (f) => f.family.toLowerCase() === family.toLowerCase()
+  );
+  return match ? buildFontFamilyValue(match.family) : saved;
+}
+
 interface ThemeCustomizerEnhancedProps {
   value: ThemeConfig;
   onChange: (theme: ThemeConfig) => void;
@@ -99,6 +137,15 @@ export const ThemeCustomizerEnhanced: React.FC<ThemeCustomizerEnhancedProps> = (
     staleTime: 60000,
   });
 
+  // Fetch the list of self-hosted font families discovered by the backend
+  // scanner. Used to populate the body / heading font dropdowns. Cached
+  // 5 minutes — fonts rarely change without a backend restart.
+  const { data: availableFonts } = useQuery<FontDefinition[]>({
+    queryKey: ['fonts'],
+    queryFn: () => fontsService.list(),
+    staleTime: 5 * 60 * 1000,
+  });
+
   const thumbnailWidth = parseInt(allSettings?.thumbnail_width) || 300;
   const thumbnailHeight = parseInt(allSettings?.thumbnail_height) || 300;
   const isBetaLayout = BETA_LAYOUTS.includes(localTheme.galleryLayout as GalleryLayoutType);
@@ -928,17 +975,20 @@ export const ThemeCustomizerEnhanced: React.FC<ThemeCustomizerEnhancedProps> = (
                 {t('branding.bodyFont')}
               </label>
               <select
-                value={localTheme.fontFamily || 'Inter, sans-serif'}
+                value={resolveFontDropdownValue(
+                  localTheme.fontFamily,
+                  availableFonts,
+                  buildFontFamilyValue('Inter')
+                )}
                 onChange={(e) => handleChange('fontFamily', e.target.value)}
                 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="Inter, sans-serif">Inter</option>
                 <option value="system-ui, sans-serif">System UI</option>
-                <option value="Georgia, serif">Georgia</option>
-                <option value="'Playfair Display', serif">Playfair Display</option>
-                <option value="'Montserrat', sans-serif">Montserrat</option>
-                <option value="'IBM Plex Sans', sans-serif">IBM Plex Sans</option>
-                <option value="'Comic Neue', cursive">Comic Neue</option>
+                {(availableFonts || []).map((f) => (
+                  <option key={f.family} value={buildFontFamilyValue(f.family)}>
+                    {f.family}
+                  </option>
+                ))}
               </select>
             </div>
 
@@ -947,15 +997,21 @@ export const ThemeCustomizerEnhanced: React.FC<ThemeCustomizerEnhancedProps> = (
                 {t('branding.headingFont')}
               </label>
               <select
-                value={localTheme.headingFontFamily || localTheme.fontFamily || 'Inter, sans-serif'}
+                value={resolveFontDropdownValue(
+                  localTheme.headingFontFamily,
+                  availableFonts,
+                  ''
+                )}
                 onChange={(e) => handleChange('headingFontFamily', e.target.value)}
                 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="">{t('branding.sameAsBody')}</option>
-                <option value="'Playfair Display', serif">Playfair Display</option>
-                <option value="'Montserrat', sans-serif">Montserrat</option>
-                <option value="Georgia, serif">Georgia</option>
-                <option value="'IBM Plex Sans', sans-serif">IBM Plex Sans</option>
+                <option value="system-ui, sans-serif">System UI</option>
+                {(availableFonts || []).map((f) => (
+                  <option key={f.family} value={buildFontFamilyValue(f.family)}>
+                    {f.family}
+                  </option>
+                ))}
               </select>
             </div>
           </div>

frontend/src/contexts/ThemeContext.tsx

@@ -1,6 +1,60 @@
 import React, { createContext, useContext, useState, useEffect, useCallback, useMemo } from 'react';
 import type { ReactNode } from 'react';
 import { ThemeConfig, EventTheme, GALLERY_THEME_PRESETS } from '../types/theme.types';
+import { fontsService, extractFamilyName, type FontDefinition } from '../services/fonts.service';
+
+// Self-hosted font loader. Resolves the available-fonts list once (cached for
+// 5 minutes) and lazily injects @font-face blocks into <head> only for the
+// families a page actually uses. Avoids preloading every available font on
+// every gallery view.
+const FONTS_LIST_TTL_MS = 5 * 60 * 1000;
+let fontsListPromise: Promise<FontDefinition[]> | null = null;
+let fontsListExpiresAt = 0;
+const injectedFamilies = new Set<string>();
+const FONT_STYLE_ID = 'self-hosted-fonts';
+
+function getFontsList(): Promise<FontDefinition[]> {
+  if (fontsListPromise && Date.now() < fontsListExpiresAt) {
+    return fontsListPromise;
+  }
+  fontsListPromise = fontsService.list().catch((err) => {
+    console.error('Failed to load fonts list:', err);
+    return [];
+  });
+  fontsListExpiresAt = Date.now() + FONTS_LIST_TTL_MS;
+  return fontsListPromise;
+}
+
+function ensureFontFaceLoaded(family: string, weights: number[]): void {
+  if (injectedFamilies.has(family)) return;
+  injectedFamilies.add(family);
+
+  let styleEl = document.getElementById(FONT_STYLE_ID) as HTMLStyleElement | null;
+  if (!styleEl) {
+    styleEl = document.createElement('style');
+    styleEl.id = FONT_STYLE_ID;
+    document.head.appendChild(styleEl);
+  }
+
+  // Folder name on disk = family name with hyphens. URL-encode in case of
+  // unusual characters (the scanner already restricts to subdirectory names,
+  // so this is belt-and-braces).
+  const folderName = family.replace(/ /g, '-');
+  const blocks = weights.map(
+    (w) => `@font-face{font-family:'${family}';font-style:normal;font-weight:${w};font-display:swap;src:url('/fonts/${encodeURIComponent(folderName)}/${w}.woff2') format('woff2');}`
+  );
+  styleEl.textContent += '\n' + blocks.join('\n');
+}
+
+async function loadFontForFamily(cssFontFamily: string | undefined | null): Promise<void> {
+  const family = extractFamilyName(cssFontFamily);
+  if (!family) return;
+  if (injectedFamilies.has(family)) return;
+  const fonts = await getFontsList();
+  const match = fonts.find((f) => f.family.toLowerCase() === family.toLowerCase());
+  if (!match) return; // unknown family — browser falls back to the CSS generic
+  ensureFontFaceLoaded(match.family, match.weights);
+}
 
 function resolveColorMode(mode: 'light' | 'dark' | 'auto' | undefined): 'light' | 'dark' {
   if (mode === 'dark') return 'dark';
@@ -85,10 +139,15 @@ export const ThemeProvider: React.FC<ThemeProviderProps> = ({
     
     if (themeConfig.fontFamily) {
       root.style.setProperty('--font-family', themeConfig.fontFamily);
+      // Lazily inject the @font-face for this family if we haven't already.
+      // Fire-and-forget: the CSS variable is set immediately, the font file
+      // streams in afterward and `font-display: swap` reflows on arrival.
+      void loadFontForFamily(themeConfig.fontFamily);
     }
-    
+
     if (themeConfig.headingFontFamily) {
       root.style.setProperty('--heading-font-family', themeConfig.headingFontFamily);
+      void loadFontForFamily(themeConfig.headingFontFamily);
     }
     
     if (themeConfig.borderRadius) {

frontend/src/index.css

@@ -1,4 +1,14 @@
-@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Noto+Sans:wght@300;400;500;600;700&family=Poppins:wght@400;500;600;700&display=swap');
+/*
+ * Self-hosted Inter is bootstrapped here so the very first paint —
+ * before React mounts and runs the dynamic @font-face injector — has
+ * the default body font available. Replaces the previous Google Fonts
+ * @import that leaked visitor IPs to fonts.googleapis.com (LG München
+ * 2022 GDPR ruling). All other families are injected on-demand by
+ * frontend/src/contexts/ThemeContext.tsx based on the active theme.
+ */
+@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/Inter/400.woff2') format('woff2'); }
+@font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url('/fonts/Inter/600.woff2') format('woff2'); }
+@font-face { font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: swap; src: url('/fonts/Inter/700.woff2') format('woff2'); }
 
 /* Import image protection styles */
 @import './styles/image-protection.css';

frontend/src/services/fonts.service.ts

@@ -0,0 +1,55 @@
+import { api } from '../config/api';
+
+export interface FontDefinition {
+  family: string;
+  weights: number[];
+}
+
+export interface FontsListResponse {
+  fonts: FontDefinition[];
+}
+
+export const fontsService = {
+  /**
+   * List all self-hosted font families discovered by the backend scanner.
+   * Cached aggressively at the React Query layer; the underlying endpoint
+   * is also TTL-cached on the backend.
+   */
+  async list(): Promise<FontDefinition[]> {
+    const res = await api.get<FontsListResponse>('/public/fonts');
+    return res.data.fonts;
+  }
+};
+
+const GENERIC_FAMILIES = new Set([
+  'sans-serif',
+  'serif',
+  'monospace',
+  'cursive',
+  'fantasy',
+  'system-ui',
+  'ui-sans-serif',
+  'ui-serif',
+  'ui-monospace',
+  'ui-rounded'
+]);
+
+/**
+ * Extract the primary font family name from a CSS font-family string.
+ *
+ * "'Jost', sans-serif"            → "Jost"
+ * "Inter, sans-serif"             → "Inter"
+ * "'Playfair Display', serif"     → "Playfair Display"
+ * "system-ui, sans-serif"         → null   (generic, no @font-face needed)
+ * undefined / "" / "sans-serif"   → null
+ */
+export function extractFamilyName(cssFontFamily: string | undefined | null): string | null {
+  if (!cssFontFamily) return null;
+  const first = cssFontFamily.split(',')[0]?.trim();
+  if (!first) return null;
+  // Strip surrounding single or double quotes
+  const unquoted = first.replace(/^['"]|['"]$/g, '').trim();
+  if (!unquoted) return null;
+  if (GENERIC_FAMILIES.has(unquoted.toLowerCase())) return null;
+  return unquoted;
+}