Merge pull request #607 from embedpdf/feature/customize-fonts

Better way of dealing with fonts, allow custom fonts and custom fonts…

Author: bobsingor

.changeset/snippet-fonts-config.md

@@ -0,0 +1,10 @@
+---
+'@embedpdf/snippet': patch
+---
+
+Add `fonts` configuration to the snippet viewer for controlling external webfont loading. Both defaults remain unchanged (Open Sans for the UI chrome, Caveat / Dancing Script / Great Vibes / Pacifico for the Create Signature "Type" tab), but integrators can now opt out cleanly for GDPR-sensitive, airgapped, or self-hosted deployments.
+
+- `fonts.ui`: controls the snippet UI font. `null` skips the `<link>` (falls back to the system font stack); an object with `family` and/or `stylesheetUrl` lets you change the viewer font family independently from the stylesheet source, with omitted `stylesheetUrl` treated as no managed `<link>`.
+- `fonts.signature`: controls the signature "Type" tab fonts. `null` skips the `<link>` and hides the "Type" tab; an object with `stylesheetUrl` and/or `fonts` lets you self-host the stylesheet and override the font list.
+
+Both stylesheets are now registered at document scope with deduped `<link rel="stylesheet">` elements so `@font-face` works consistently across browsers and typed signatures can render correctly to canvas. Existing matching stylesheet links are reused when possible.

.changeset/snippet-zoom-toolbar-percent-nowrap.md

@@ -0,0 +1,5 @@
+---
+'@embedpdf/snippet': patch
+---
+
+Prevent the zoom percentage `%` symbol in the custom zoom toolbar from wrapping to a new line when the toolbar is resized to a narrow width. The input and `%` are now rendered as a single non-wrapping flex group that clips overflow instead of breaking the layout.

viewers/snippet/src/components/app.tsx

@@ -1,5 +1,6 @@
 import { h, Fragment } from 'preact';
-import { useMemo } from 'preact/hooks';
+import type { JSX } from 'preact';
+import { useEffect, useMemo } from 'preact/hooks';
 import styles from '../styles/index.css';
 import { EmbedPDF } from '@embedpdf/core/preact';
 import { createPluginRegistration, PluginRegistry, PermissionConfig } from '@embedpdf/core';
@@ -128,6 +129,7 @@ import { WidgetEditSidebar } from '@/components/widget-edit-sidebar';
 import { RubberStampSidebar } from '@/components/rubber-stamp-sidebar';
 import { SignatureSidebar } from '@/components/signature-sidebar';
 import { SignatureCreateModal } from '@/components/signature-create-modal';
+import { SnippetConfigProvider } from '@/components/snippet-config-context';
 import { SchemaSelectionMenu } from '@/ui/schema-selection-menu';
 import { SchemaOverlay } from '@/ui/schema-overlay';
 import { PrintModal } from '@/components/print-modal';
@@ -158,11 +160,66 @@ import { Capture } from '@/components/capture';
 import { ProtectModal } from './protect-modal';
 import { UnlockOwnerOverlay } from './unlock-owner-overlay';
 import { ViewPermissionsModal } from './view-permissions-modal';
+import { ensureFontStylesheet } from './font-loader';
+import { resolveUiFontConfig } from './font-config';
 
 // ============================================================================
 // Main Configuration Interface - Uses actual plugin config types directly
 // ============================================================================
 
+export interface SnippetFontStylesheetConfig {
+  /**
+   * Stylesheet URL to register at document scope.
+   * Omit (or set to `null`) to skip the `<link>` entirely — useful when the
+   * fonts are already loaded elsewhere or when you want to rely on the CSS
+   * `font-family` fallback stack.
+   */
+  stylesheetUrl?: string | null;
+}
+
+export interface SnippetUiFontConfig extends SnippetFontStylesheetConfig {
+  /**
+   * CSS font-family used by the viewer UI.
+   * Defaults to `'Open Sans', system-ui, sans-serif`.
+   */
+  family?: string;
+}
+
+/**
+ * Fonts shown in the "Type" tab of the Create Signature modal.
+ * UI-only concern; not part of the signature plugin config.
+ */
+export interface SnippetSignatureFontConfig extends SnippetFontStylesheetConfig {
+  /**
+   * Font list shown in the "Type" tab's font picker.
+   * Defaults to Caveat / Dancing Script / Great Vibes / Pacifico.
+   */
+  fonts?: Array<{ name: string; family: string }>;
+}
+
+/**
+ * Controls the snippet's external webfont loading. Every field is opt-out:
+ * omit for the built-in Google Fonts defaults, or set to `null` to skip the
+ * external request and fall through to the CSS font-family fallback stack.
+ */
+export interface SnippetFontsConfig {
+  /**
+   * Stylesheet URL for the snippet UI font (Open Sans by default).
+   * - `undefined`: loads Open Sans from Google Fonts at init.
+   * - `null`: skip the `<link>`; the UI falls back to the system font stack.
+   * - object: override the UI font family and/or stylesheet URL.
+   */
+  ui?: SnippetUiFontConfig | null;
+
+  /**
+   * Fonts for the "Type" tab of the Create Signature modal.
+   * - `undefined`: loads the 4 cursive families from Google Fonts on first open.
+   * - `null`: skip the `<link>`; typed signatures use the OS cursive stack.
+   * - object: self-host / override `stylesheetUrl` and/or `fonts`.
+   */
+  signature?: SnippetSignatureFontConfig | null;
+}
+
 export interface PDFViewerConfig {
   // === Document Source (optional) ===
   /** URL or path to the PDF document. If not provided, viewer loads with no document. */
@@ -296,6 +353,13 @@ export interface PDFViewerConfig {
   /** Signature options (mode, default size) */
   signature?: Partial<SignaturePluginConfig>;
 
+  // Fonts (snippet-level webfont loading)
+  /**
+   * Controls external webfonts loaded by the snippet UI. See `SnippetFontsConfig`.
+   * Useful for GDPR-sensitive, airgapped, or self-hosted deployments.
+   */
+  fonts?: SnippetFontsConfig;
+
   // Infrastructure
   /** History/undo options */
   history?: Partial<HistoryPluginConfig>;
@@ -546,18 +610,26 @@ export function PDFViewer({ config, onRegistryReady }: PDFViewerProps) {
     [],
   );
 
+  const uiFont = resolveUiFontConfig(config.fonts?.ui);
+  const uiFontStyle = useMemo(() => ({ '--ep-font-family': uiFont.family }), [uiFont.family]);
+
+  useEffect(() => {
+    if (!uiFont.stylesheetUrl) return;
+    ensureFontStylesheet('ui', uiFont.stylesheetUrl, [uiFont.family]);
+  }, [uiFont.family, uiFont.stylesheetUrl]);
+
   if (!engine || isLoading)
     return (
-      <>
+      <div className="embedpdf-snippet-root" style={uiFontStyle}>
         <style>{styles}</style>
         <div className="flex h-full w-full items-center justify-center">
           <LoadingIndicator size="lg" text="Initializing PDF engine..." />
         </div>
-      </>
+      </div>
     );
 
   return (
-    <>
+    <div className="embedpdf-snippet-root" style={uiFontStyle}>
       <style>{styles}</style>
       <EmbedPDF
         config={{
@@ -675,16 +747,21 @@ export function PDFViewer({ config, onRegistryReady }: PDFViewerProps) {
             {pluginsReady ? (
               <>
                 {activeDocumentId ? (
-                  <UIProvider
-                    documentId={activeDocumentId}
-                    components={uiComponents}
-                    renderers={uiRenderers}
-                    className="relative flex h-full w-full select-none flex-col"
-                  >
-                    <ViewerLayout documentId={activeDocumentId} tabBarVisibility={config.tabBar} />
-                    <Capture documentId={activeDocumentId} />
-                    <HintLayer documentId={activeDocumentId} />
-                  </UIProvider>
+                  <SnippetConfigProvider config={config}>
+                    <UIProvider
+                      documentId={activeDocumentId}
+                      components={uiComponents}
+                      renderers={uiRenderers}
+                      className="relative flex h-full w-full select-none flex-col"
+                    >
+                      <ViewerLayout
+                        documentId={activeDocumentId}
+                        tabBarVisibility={config.tabBar}
+                      />
+                      <Capture documentId={activeDocumentId} />
+                      <HintLayer documentId={activeDocumentId} />
+                    </UIProvider>
+                  </SnippetConfigProvider>
                 ) : (
                   <EmptyState />
                 )}
@@ -697,6 +774,6 @@ export function PDFViewer({ config, onRegistryReady }: PDFViewerProps) {
           </>
         )}
       </EmbedPDF>
-    </>
+    </div>
   );
 }

viewers/snippet/src/components/custom-zoom-toolbar.tsx

@@ -66,20 +66,23 @@ export function CustomZoomToolbar({ documentId }: CustomZoomToolbarProps) {
     <div className="relative">
       <div className="bg-interactive-hover flex items-center rounded">
         {/* Editable Zoom Percentage Input */}
-        <form onSubmit={handleZoomChange} className="block">
+        <form
+          onSubmit={handleZoomChange}
+          className="flex min-w-0 flex-nowrap items-center overflow-hidden whitespace-nowrap"
+        >
           <input
             name="zoom"
             type="text"
             inputMode="numeric"
             pattern="\d*"
-            className="h-6 w-8 border-0 bg-transparent p-0 text-right text-sm outline-none focus:outline-none"
+            className="h-6 w-8 min-w-0 shrink border-0 bg-transparent p-0 text-right text-sm outline-none focus:outline-none"
             aria-label="Set zoom"
             autoFocus={false}
             value={inputValue}
             onInput={handleInputChange}
             onBlur={handleBlur}
           />
-          <span className="text-sm">%</span>
+          <span className="shrink-0 text-sm">%</span>
         </form>
         <CommandButton
           commandId="zoom:toggle-menu"

viewers/snippet/src/components/font-config.ts

@@ -0,0 +1,107 @@
+import type { SnippetSignatureFontConfig, SnippetUiFontConfig } from './app';
+
+/**
+ * Default CSS font-family stack for the snippet UI.
+ * `system-ui, sans-serif` is the fallback when Open Sans isn't loaded.
+ */
+export const DEFAULT_UI_FONT_FAMILY = "'Open Sans', system-ui, sans-serif";
+
+/**
+ * Default Google Fonts stylesheet URL for the snippet UI font (Open Sans).
+ */
+export const DEFAULT_UI_FONT_URL =
+  'https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600&display=swap';
+
+/**
+ * Default Google Fonts stylesheet URL for the signature "Type" tab.
+ */
+export const DEFAULT_SIGNATURE_FONTS_URL =
+  'https://fonts.googleapis.com/css2?family=Caveat&family=Dancing+Script&family=Great+Vibes&family=Pacifico&display=swap';
+
+/**
+ * Default font list for the signature "Type" tab.
+ */
+export const DEFAULT_SIGNATURE_FONTS: ReadonlyArray<{ name: string; family: string }> = [
+  { name: 'Dancing Script', family: "'Dancing Script', cursive" },
+  { name: 'Great Vibes', family: "'Great Vibes', cursive" },
+  { name: 'Pacifico', family: "'Pacifico', cursive" },
+  { name: 'Caveat', family: "'Caveat', cursive" },
+];
+
+export interface ResolvedUiFontConfig {
+  family: string;
+  stylesheetUrl: string | null;
+}
+
+export interface ResolvedSignatureFontsConfig {
+  fonts: ReadonlyArray<{ name: string; family: string }>;
+  stylesheetUrl: string | null;
+  /**
+   * Whether the signature "Type" tab should be shown. False when the snippet
+   * manages no stylesheet AND the integrator has not provided a fonts list.
+   */
+  enabled: boolean;
+}
+
+/**
+ * Resolves the UI font config from `config.fonts?.ui`.
+ *
+ * - `undefined`: full default — Open Sans family + Google Fonts URL.
+ * - `null`: full opt-out — default family stack, no `<link>`.
+ * - object: caller takes over. Each field is independent: `family` falls
+ *   back to the default stack when omitted, and `stylesheetUrl` falls back
+ *   to `null` (no managed `<link>`) when omitted. There is no implicit
+ *   default-URL fallback when only `family` is specified, since loading
+ *   Open Sans while rendering a different family is almost never intended.
+ */
+export function resolveUiFontConfig(
+  value: SnippetUiFontConfig | null | undefined,
+): ResolvedUiFontConfig {
+  if (value === null) {
+    return { family: DEFAULT_UI_FONT_FAMILY, stylesheetUrl: null };
+  }
+  if (value === undefined) {
+    return { family: DEFAULT_UI_FONT_FAMILY, stylesheetUrl: DEFAULT_UI_FONT_URL };
+  }
+  return {
+    family: value.family ?? DEFAULT_UI_FONT_FAMILY,
+    stylesheetUrl: value.stylesheetUrl ?? null,
+  };
+}
+
+/**
+ * Resolves the signature "Type" tab font config from `config.fonts?.signature`.
+ *
+ * - `undefined`: full default — built-in font list + Google Fonts URL.
+ * - `null`: full opt-out — no `<link>` and no "Type" tab.
+ * - object: caller takes over. `fonts` falls back to the built-in list when
+ *   omitted or empty; `stylesheetUrl` falls back to `null` when omitted.
+ */
+export function resolveSignatureFontsConfig(
+  value: SnippetSignatureFontConfig | null | undefined,
+): ResolvedSignatureFontsConfig {
+  if (value === null) {
+    return { fonts: DEFAULT_SIGNATURE_FONTS, stylesheetUrl: null, enabled: false };
+  }
+  if (value === undefined) {
+    return {
+      fonts: DEFAULT_SIGNATURE_FONTS,
+      stylesheetUrl: DEFAULT_SIGNATURE_FONTS_URL,
+      enabled: true,
+    };
+  }
+
+  if (value.fonts && value.fonts.length > 0) {
+    return {
+      fonts: value.fonts,
+      stylesheetUrl: value.stylesheetUrl ?? null,
+      enabled: true,
+    };
+  }
+
+  return {
+    fonts: DEFAULT_SIGNATURE_FONTS,
+    stylesheetUrl: value.stylesheetUrl ?? null,
+    enabled: value.stylesheetUrl != null,
+  };
+}