Embed handwriting fonts in the exported PDF

apps/web/package.json

@@ -14,10 +14,11 @@
     "@dnd-kit/core": "^6.3.1",
     "@dnd-kit/sortable": "^10.0.0",
     "@dnd-kit/utilities": "^3.2.2",
-    "@fontsource/caveat": "^5.2.8",
+    "@fontsource/indie-flower": "^5.2.7",
     "@fontsource/kalam": "^5.2.8",
     "@fontsource/patrick-hand": "^5.2.8",
     "@fontsource/shadows-into-light": "^5.2.8",
+    "@pdf-lib/fontkit": "^1.1.1",
     "@radix-ui/react-slot": "^1.3.0",
     "@tanstack/react-router": "^1.170.16",
     "class-variance-authority": "^0.7.1",

apps/web/src/components/a4-preview.tsx

@@ -34,6 +34,7 @@ export function A4Preview() {
         showCaptions,
         showCameraLine,
         paper,
+        captionFontId,
       )
     } finally {
       setIsExporting(false)

apps/web/src/lib/fonts.ts

@@ -6,7 +6,7 @@ export interface CaptionFont {
 }
 
 export const CAPTION_FONTS: CaptionFont[] = [
-  { id: 'caveat', label: 'Caveat', stack: '"Caveat", cursive' },
+  { id: 'indie-flower', label: 'Indie Flower', stack: '"Indie Flower", cursive' },
   { id: 'patrick-hand', label: 'Patrick Hand', stack: '"Patrick Hand", cursive' },
   {
     id: 'shadows-into-light',

apps/web/src/lib/pdf-fonts.ts

@@ -0,0 +1,47 @@
+import fontkit from '@pdf-lib/fontkit'
+import { type PDFDocument, type PDFFont } from 'pdf-lib'
+
+import indieFlowerUrl from '@/fonts/IndieFlower-Regular.ttf?url'
+import kalamUrl from '@/fonts/Kalam-Regular.ttf?url'
+import patrickHandUrl from '@/fonts/PatrickHand-Regular.ttf?url'
+import shadowsUrl from '@/fonts/ShadowsIntoLight-Regular.ttf?url'
+
+// Static TTFs for the handwriting caption fonts, so the exported PDF matches the
+// on-screen preview. Only fonts that render faithfully in pdf-lib (which has no
+// GPOS kerning) are offered — Caveat, a connected script, was dropped for this
+// reason (see #23).
+const PDF_FONT_URLS: Record<string, string> = {
+  'indie-flower': indieFlowerUrl,
+  'patrick-hand': patrickHandUrl,
+  'shadows-into-light': shadowsUrl,
+  kalam: kalamUrl,
+}
+
+const bytesCache = new Map<string, Promise<ArrayBuffer>>()
+
+function fontBytes(url: string): Promise<ArrayBuffer> {
+  let pending = bytesCache.get(url)
+  if (!pending) {
+    pending = fetch(url).then((response) => response.arrayBuffer())
+    bytesCache.set(url, pending)
+  }
+  return pending
+}
+
+/**
+ * Embeds (subsetted) the handwriting TTF for `fontId`, or returns null so the
+ * caller can fall back to a standard font.
+ */
+export async function embedCaptionFont(
+  doc: PDFDocument,
+  fontId: string,
+): Promise<PDFFont | null> {
+  const url = PDF_FONT_URLS[fontId]
+  if (!url) return null
+  try {
+    doc.registerFontkit(fontkit)
+    return await doc.embedFont(await fontBytes(url), { subset: true })
+  } catch {
+    return null
+  }
+}

apps/web/src/lib/pdf.ts

@@ -8,6 +8,7 @@ import {
   cropMarks,
   sheetLayout,
 } from '@/lib/layout'
+import { embedCaptionFont } from '@/lib/pdf-fonts'
 import { type Photo } from '@/lib/photos'
 
 const IMAGE_DPI = 300
@@ -62,9 +63,14 @@ export async function buildSheetPdf(
   showCaptions: boolean,
   showCameraLine: boolean,
   paper: PaperSize,
+  captionFontId: string,
 ): Promise<Uint8Array> {
   const doc = await PDFDocument.create()
-  const font = await doc.embedFont(StandardFonts.Helvetica)
+  // Embed the selected handwriting font so the PDF matches the preview; fall
+  // back to Helvetica if it can't be loaded.
+  const font =
+    (await embedCaptionFont(doc, captionFontId)) ??
+    (await doc.embedFont(StandardFonts.Helvetica))
   const layout = sheetLayout(perRow, paper)
   const pageW = paper.widthMm * PT_PER_MM
   const pageH = paper.heightMm * PT_PER_MM
@@ -191,6 +197,7 @@ export async function downloadSheetPdf(
   showCaptions: boolean,
   showCameraLine: boolean,
   paper: PaperSize,
+  captionFontId: string,
   filename = 'polaroids.pdf',
 ): Promise<void> {
   const bytes = await buildSheetPdf(
@@ -200,6 +207,7 @@ export async function downloadSheetPdf(
     showCaptions,
     showCameraLine,
     paper,
+    captionFontId,
   )
   const blob = new Blob([bytes as BlobPart], { type: 'application/pdf' })
   const url = URL.createObjectURL(blob)

apps/web/src/main.tsx

@@ -4,7 +4,7 @@ import { RouterProvider, createRouter } from '@tanstack/react-router'
 
 import { routeTree } from './routeTree.gen'
 import './styles.css'
-import '@fontsource/caveat'
+import '@fontsource/indie-flower'
 import '@fontsource/patrick-hand'
 import '@fontsource/shadows-into-light'
 import '@fontsource/kalam'

apps/web/vite.config.ts

@@ -37,7 +37,7 @@ export default defineConfig({
         // Precache the whole shell — including the JS chunk that embeds the
         // offline geocoding dataset and the bundled fonts — so the app works
         // with no network at all.
-        globPatterns: ['**/*.{js,css,html,svg,png,woff,woff2}'],
+        globPatterns: ['**/*.{js,css,html,svg,png,woff,woff2,ttf}'],
         maximumFileSizeToCacheInBytes: 4 * 1024 * 1024,
         cleanupOutdatedCaches: true,
       },