Bundle Inter and JetBrains Mono fonts, add PDF export, remove Google Fonts CDN

Author: milanofthe

package-lock.json

@@ -44,10 +44,12 @@
     "@codemirror/theme-one-dark": "^6.0.0",
     "@xyflow/svelte": "^1.5.0",
     "codemirror": "^6.0.0",
+    "jspdf": "^4.1.0",
     "katex": "^0.16.0",
     "opentype.js": "^1.3.4",
     "pathfinding": "^0.4.18",
     "plotly.js-dist-min": "^2.35.0",
-    "pyodide": "^0.26.0"
+    "pyodide": "^0.26.0",
+    "svg2pdf.js": "^2.7.0"
   }
 }

package.json

@@ -1,3 +1,10 @@
+/* Bundled fonts — no external CDN dependency */
+@font-face { font-family: 'Inter'; font-weight: 400; font-style: normal; font-display: swap; src: url('/fonts/Inter-Regular.woff2') format('woff2'); }
+@font-face { font-family: 'Inter'; font-weight: 500; font-style: normal; font-display: swap; src: url('/fonts/Inter-Medium.woff2') format('woff2'); }
+@font-face { font-family: 'Inter'; font-weight: 600; font-style: normal; font-display: swap; src: url('/fonts/Inter-SemiBold.woff2') format('woff2'); }
+@font-face { font-family: 'JetBrains Mono'; font-weight: 400; font-style: normal; font-display: swap; src: url('/fonts/JetBrainsMono-Regular.woff2') format('woff2'); }
+@font-face { font-family: 'JetBrains Mono'; font-weight: 500; font-style: normal; font-display: swap; src: url('/fonts/JetBrainsMono-Medium.woff2') format('woff2'); }
+
 /* Modern Design System */
 :root {
 	/* ===== SURFACES (2-tier elevation) ===== */

src/app.css

@@ -22,7 +22,7 @@ import { generateBlockCodeHeader, generateEventCodeHeader } from '$lib/utils/cod
 import { exportComponent } from '$lib/schema/componentOps';
 import { openImportDialog } from '$lib/schema/fileOps';
 import { hasExportableData, exportRecordingData } from '$lib/utils/csvExport';
-import { exportToSVG } from '$lib/export/svg';
+import { exportToSVG, exportToPDF } from '$lib/export/svg';
 import { downloadSvg } from '$lib/utils/download';
 import { plotSettingsStore, DEFAULT_BLOCK_SETTINGS } from '$lib/stores/plotSettings';
 import { portLabelsStore } from '$lib/stores/portLabels';
@@ -415,6 +415,17 @@ function buildCanvasMenu(
 					console.error('SVG export failed:', e);
 				}
 			}
+		},
+		{
+			label: 'Export PDF',
+			icon: 'image',
+			action: async () => {
+				try {
+					await exportToPDF();
+				} catch (e) {
+					console.error('PDF export failed:', e);
+				}
+			}
 		}
 	];
 

src/lib/components/contextMenuBuilders.ts

@@ -2,5 +2,5 @@
  * Export module
  */
 
-export { exportToSVG } from './svg';
+export { exportToSVG, exportToPDF } from './svg';
 export type { ExportOptions } from './svg';

src/lib/export/index.ts

@@ -5,6 +5,6 @@
  * excluding UI elements (background, controls, minimap).
  */
 
-export { exportToSVG } from './renderer';
+export { exportToSVG, exportToPDF } from './renderer';
 export type { ExportOptions } from './types';
 export { DEFAULT_OPTIONS } from './types';

src/lib/export/svg/index.ts

@@ -10,6 +10,8 @@
  * is self-contained and renders correctly in any viewer without fonts.
  */
 
+import { jsPDF } from 'jspdf';
+import 'svg2pdf.js';
 import { domToSvg } from '../dom2svg/index.js';
 import type { FontMapping } from '../dom2svg/index.js';
 import type { ExportOptions } from './types';
@@ -29,8 +31,19 @@ const EXCLUDE_SELECTORS = [
 /** KaTeX font CDN base URL */
 const KATEX_CDN = 'https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/fonts';
 
-/** KaTeX font mapping for dom2svg textToPath conversion */
-const KATEX_FONTS: FontMapping = {
+/** Font mapping for dom2svg textToPath conversion */
+const EXPORT_FONTS: FontMapping = {
+	// UI fonts (bundled)
+	Inter: [
+		{ url: '/fonts/Inter-Regular.woff2', weight: 400, style: 'normal' },
+		{ url: '/fonts/Inter-Medium.woff2', weight: 500, style: 'normal' },
+		{ url: '/fonts/Inter-SemiBold.woff2', weight: 600, style: 'normal' }
+	],
+	'JetBrains Mono': [
+		{ url: '/fonts/JetBrainsMono-Regular.woff2', weight: 400, style: 'normal' },
+		{ url: '/fonts/JetBrainsMono-Medium.woff2', weight: 500, style: 'normal' }
+	],
+	// KaTeX math fonts (CDN)
 	KaTeX_Main: [
 		{ url: `${KATEX_CDN}/KaTeX_Main-Regular.woff2`, weight: 'normal', style: 'normal' },
 		{ url: `${KATEX_CDN}/KaTeX_Main-Bold.woff2`, weight: 'bold', style: 'normal' },
@@ -173,7 +186,7 @@ export async function exportToSVG(options: ExportOptions = {}): Promise<string>
 			exclude: EXCLUDE_SELECTORS,
 			flattenTransforms: true,
 			textToPath: true,
-			fonts: KATEX_FONTS,
+			fonts: EXPORT_FONTS,
 			compat: opts.compat
 		});
 
@@ -194,3 +207,24 @@ export async function exportToSVG(options: ExportOptions = {}): Promise<string>
 		element.style.overflow = origOverflow;
 	}
 }
+
+export async function exportToPDF(options: ExportOptions = {}): Promise<void> {
+	const svgString = await exportToSVG(options);
+
+	// Parse SVG string into a DOM element
+	const parser = new DOMParser();
+	const doc = parser.parseFromString(svgString, 'image/svg+xml');
+	const svgEl = doc.documentElement;
+
+	const width = parseFloat(svgEl.getAttribute('width') || '800');
+	const height = parseFloat(svgEl.getAttribute('height') || '600');
+
+	const pdf = new jsPDF({
+		orientation: width > height ? 'landscape' : 'portrait',
+		unit: 'pt',
+		format: [width, height]
+	});
+
+	await (pdf as any).svg(svgEl, { x: 0, y: 0, width, height });
+	pdf.save('pathview-graph.pdf');
+}

src/lib/export/svg/renderer.ts

@@ -951,9 +951,6 @@
 <svelte:head>
 	<title>PathView</title>
 	<link rel="icon" type="image/png" href="{base}/favicon.png">
-	<link rel="preconnect" href="https://fonts.googleapis.com">
-	<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="anonymous">
-	<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
 </svelte:head>
 
 <div class="app">