diff --git a/AGENTS.md b/AGENTS.md
index 42cdb76..c6f5acd 100644
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -102,3 +102,4 @@ Never:
 - Edit generated output folders unless explicitly requested.
 - Modify node_modules or lockfiles unless explicitly requested.
 - Reintroduce cross-workspace overwrite/delete behavior with any changes.
+- Use eslint disable comments.
diff --git a/playwright/github-pr-drawer/active-context-sync.spec.ts b/playwright/github-pr-drawer/active-context-sync.spec.ts
index 89c3c55..a856018 100644
--- a/playwright/github-pr-drawer/active-context-sync.spec.ts
+++ b/playwright/github-pr-drawer/active-context-sync.spec.ts
@@ -10,6 +10,7 @@ import {
   getWorkspaceTabsRecord,
   mockRepositoryBranches,
   openMostRecentStoredWorkspaceContext,
+  openStoredWorkspaceContextByHead,
   renameWorkspaceTab,
   seedActivePrWorkspaceContext,
   seedLocalWorkspaceContexts,
@@ -1304,7 +1305,6 @@ test('Active PR context push commit uses Git Database API atomic path by default
   await connectByotWithSingleRepo(page)
   await openMostRecentStoredWorkspaceContext(page)
   await ensureOpenPrDrawerOpen(page)
-
   await setComponentEditorSource(page, 'const commitMarker = 2')
   await setStylesEditorSource(page, '.commit-marker { color: blue; }')
   const pushCommitMessage = 'chore: push active context sync (atomic)'
@@ -1563,8 +1563,11 @@ test('Open PR uses module tab paths when stale target file paths collide', async
     },
   ])
 
-  await connectByotWithSingleRepo(page)
-  await openMostRecentStoredWorkspaceContext(page)
+  await connectByotWithSingleRepo(page, {
+    autoOpenWorkspace: false,
+    assertPrRepositorySelected: false,
+  })
+  await openStoredWorkspaceContextByHead(page, 'develop/open-pr-stale-target-paths')
   await ensureOpenPrDrawerOpen(page)
 
   const commitMessage = 'chore: open pr with stale module target path metadata'
diff --git a/playwright/helpers/app-test-helpers.ts b/playwright/helpers/app-test-helpers.ts
index 4447f47..ef2772a 100644
--- a/playwright/helpers/app-test-helpers.ts
+++ b/playwright/helpers/app-test-helpers.ts
@@ -2,6 +2,7 @@ import { expect } from '@playwright/test'
 import type { Page } from '@playwright/test'
 
 const webServerMode = process.env.PLAYWRIGHT_WEB_SERVER_MODE ?? 'dev'
+const pagesWithStubbedExternalFonts = new WeakSet<Page>()
 
 export const appEntryPath =
   webServerMode === 'preview' ? '/index.html' : '/src/index.html'
@@ -71,7 +72,34 @@ const navigateToApp = async (page: Page, path: string) => {
   }
 }
 
+const stubExternalFontRequests = async (page: Page) => {
+  if (pagesWithStubbedExternalFonts.has(page)) {
+    return
+  }
+
+  pagesWithStubbedExternalFonts.add(page)
+
+  await page.route('https://fonts.googleapis.com/**', async route => {
+    await route.fulfill({
+      status: 200,
+      contentType: 'text/css; charset=utf-8',
+      body: '',
+      headers: {
+        'cache-control': 'public, max-age=31536000, immutable',
+      },
+    })
+  })
+
+  await page.route('https://fonts.gstatic.com/**', async route => {
+    await route.fulfill({
+      status: 204,
+      body: '',
+    })
+  })
+}
+
 export const waitForAppReady = async (page: Page, path = appEntryPath) => {
+  await stubExternalFontRequests(page)
   await navigateToApp(page, path)
   await expect(page.getByRole('heading', { name: '@knighted/develop' })).toBeVisible()
   await expect
@@ -483,8 +511,12 @@ export const connectByotWithSingleRepo = async (
   page: Page,
   {
     branchesByRepo,
+    autoOpenWorkspace = true,
+    assertPrRepositorySelected = true,
   }: {
     branchesByRepo?: BranchesByRepo
+    autoOpenWorkspace?: boolean
+    assertPrRepositorySelected?: boolean
   } = {},
 ) => {
   await page.route('https://api.github.com/user/repos**', async route => {
@@ -525,33 +557,37 @@ export const connectByotWithSingleRepo = async (
   await workspacesRepositoryFilter.selectOption('knightedcodemonkey/develop')
   await expect(workspacesRepositoryFilter).toHaveValue('knightedcodemonkey/develop')
 
-  const initializeButton = page.getByRole('button', {
-    name: 'Initialize',
-    exact: true,
-  })
+  if (autoOpenWorkspace) {
+    const initializeButton = page.getByRole('button', {
+      name: 'Initialize',
+      exact: true,
+    })
 
-  if (await initializeButton.isVisible()) {
-    await initializeButton.click()
-  } else {
-    const storedWorkspace = page.getByLabel('Stored workspace')
-    if (await storedWorkspace.isVisible()) {
-      const workspaceValue = await storedWorkspace
-        .locator('option:not([value=""])')
-        .first()
-        .getAttribute('value')
-
-      if (workspaceValue) {
-        await storedWorkspace.selectOption(workspaceValue)
-        await page.getByRole('button', { name: 'Open', exact: true }).click()
+    if (await initializeButton.isVisible()) {
+      await initializeButton.click()
+    } else {
+      const storedWorkspace = page.getByLabel('Stored workspace')
+      if (await storedWorkspace.isVisible()) {
+        const workspaceValue = await storedWorkspace
+          .locator('option:not([value=""])')
+          .first()
+          .getAttribute('value')
+
+        if (workspaceValue) {
+          await storedWorkspace.selectOption(workspaceValue)
+          await page.getByRole('button', { name: 'Open', exact: true }).click()
+        }
       }
     }
   }
 
   await ensureWorkspacesDrawerClosed(page)
 
-  const repoSelect = page.getByLabel('Pull request repository')
-  await expect(repoSelect).toHaveValue('knightedcodemonkey/develop')
-  await expect(repoSelect).toBeDisabled()
+  if (assertPrRepositorySelected) {
+    const repoSelect = page.getByLabel('Pull request repository')
+    await expect(repoSelect).toHaveValue('knightedcodemonkey/develop')
+    await expect(repoSelect).toBeDisabled()
+  }
 
   await expect(
     page.getByRole('button', {
diff --git a/playwright/rendering-modes/core.spec.ts b/playwright/rendering-modes/core.spec.ts
index 4a28a12..08b601a 100644
--- a/playwright/rendering-modes/core.spec.ts
+++ b/playwright/rendering-modes/core.spec.ts
@@ -128,6 +128,7 @@ const readLatestWorkspaceSnapshot = async (page: import('@playwright/test').Page
 
     return {
       renderMode: typeof latest.renderMode === 'string' ? latest.renderMode : '',
+      fontCssUrl: typeof latest.fontCssUrl === 'string' ? latest.fontCssUrl : '',
       styleLanguage:
         typeof primaryStylesTab?.language === 'string' ? primaryStylesTab.language : '',
     }
@@ -147,6 +148,12 @@ const readPreviewUserStyleText = async (page: import('@playwright/test').Page) =
     })
 }
 
+const readPreviewBodyFontFamily = async (page: import('@playwright/test').Page) => {
+  return getPreviewFrame(page)
+    .locator('html')
+    .evaluate(() => getComputedStyle(document.body).fontFamily || '')
+}
+
 test.beforeEach(async ({ page }) => {
   await resetWorkbenchStorage(page)
 })
@@ -228,6 +235,46 @@ test('reactJsx tag interpolation renders memo and forwardRef components', async
     .toBe(0)
 })
 
+test('workspace font CSS URL applies to preview and persists per workspace', async ({
+  page,
+}) => {
+  await waitForInitialRender(page)
+
+  await page.getByRole('button', { name: 'Workspaces' }).click()
+
+  const fontCssUrlInput = page.getByRole('textbox', {
+    name: 'Workspace font stylesheet URL',
+  })
+  await fontCssUrlInput.fill(
+    'https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;700&display=swap',
+  )
+  await page.getByRole('button', { name: 'Load', exact: true }).click()
+
+  await expect
+    .poll(async () => (await readPreviewBodyFontFamily(page)).toLowerCase())
+    .toContain('ibm plex sans')
+
+  await expect
+    .poll(async () => {
+      const snapshot = await readLatestWorkspaceSnapshot(page)
+      return snapshot?.fontCssUrl ?? ''
+    })
+    .toBe(
+      'https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;700&display=swap',
+    )
+
+  await page.reload()
+  await waitForInitialRender(page)
+  await page.getByRole('button', { name: 'Workspaces' }).click()
+
+  await expect(fontCssUrlInput).toHaveValue(
+    'https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;700&display=swap',
+  )
+  await expect
+    .poll(async () => (await readPreviewBodyFontFamily(page)).toLowerCase())
+    .toContain('ibm plex sans')
+})
+
 test('react mode keeps App.ts entry but surfaces rename guidance until compatible', async ({
   page,
 }) => {
diff --git a/src/app.js b/src/app.js
index 5bdd8bb..990ffcc 100644
--- a/src/app.js
+++ b/src/app.js
@@ -66,6 +66,11 @@ import { createGitHubPrDrawer } from './modules/github/pr/drawer/controller/crea
 import { createLayoutThemeController } from './modules/ui/layout-theme.js'
 import { createLintDiagnosticsController } from './modules/diagnostics/lint-diagnostics.js'
 import { createPreviewBackgroundController } from './modules/preview/preview-background.js'
+import {
+  createPreviewFontController,
+  defaultPreviewFontCssUrl,
+  normalizePreviewFontCssUrl,
+} from './modules/preview/preview-font.js'
 import { getReactEntryTabCompatibilityError } from './modules/preview/preview-entry-resolver.js'
 import { createRenderRuntimeController } from './modules/preview/render-runtime.js'
 import { createTypeDiagnosticsController } from './modules/diagnostics/type-diagnostics.js'
@@ -74,6 +79,8 @@ import { ensureJsxTransformSource } from './modules/preview/jsx-transform-runtim
 import { createEditorPoolManager } from './modules/editor/editor-pool-manager.js'
 import { createWorkspaceTabsState } from './modules/workspace/workspace-tabs-state.js'
 import { createWorkspacesDrawer } from './modules/workspace/workspaces-drawer/drawer.js'
+import { createApplyWorkspaceFontCssUrl } from './modules/app-core/workspace-font-css-url-load.js'
+import { createPreviewFontSetup } from './modules/app-core/preview-font-setup.js'
 import {
   createDebouncedWorkspaceSaver,
   createWorkspaceStorageAdapter,
@@ -151,6 +158,8 @@ const workspacesInitialize = document.getElementById('workspaces-initialize')
 const workspacesShare = document.getElementById('workspaces-share')
 const workspacesNew = document.getElementById('workspaces-new')
 const workspacesSelect = document.getElementById('workspaces-select')
+const workspacesFontCssUrlInput = document.getElementById('workspaces-font-css-url')
+const workspacesFontCssUrlLoad = document.getElementById('workspaces-font-css-url-load')
 const workspacesOpen = document.getElementById('workspaces-open')
 const workspacesRename = document.getElementById('workspaces-rename')
 const workspacesRemove = document.getElementById('workspaces-remove')
@@ -349,6 +358,14 @@ const previewBackground = createPreviewBackgroundController({
   },
 })
 
+const previewFont = createPreviewFontSetup({
+  createPreviewFontController,
+  previewFontCssUrlInput: workspacesFontCssUrlInput,
+  defaultPreviewFontCssUrl,
+  getRenderRuntime: () => renderRuntime,
+  queueWorkspaceSave: () => queueWorkspaceSave?.(),
+})
+
 const layoutTheme = createLayoutThemeController({
   appThemeButtons,
   syncPreviewBackgroundPickerFromTheme: () =>
@@ -757,7 +774,9 @@ const workspaceSyncController = createWorkspaceSyncController({
   getActiveWorkspaceRecordId: () => activeWorkspaceRecordId,
   getActiveWorkspaceCreatedAt: () => activeWorkspaceCreatedAt,
   getRenderModeValue: () => renderMode.value,
+  getPreviewFontCssUrlValue: () => previewFont.getPreviewFontCssUrl(),
   normalizeRenderMode: mode => normalizeRenderMode(mode),
+  normalizePreviewFontCssUrl,
 })
 
 const getTypecheckSourcePath = () =>
@@ -891,10 +910,15 @@ const {
   workspaceTabsState,
   resolveWorkspaceActiveTabId,
   normalizeRenderMode: mode => normalizeRenderMode(mode),
+  normalizePreviewFontCssUrl,
   getRenderModeValue: () => renderMode.value,
+  getPreviewFontCssUrlValue: () => previewFont.getPreviewFontCssUrl(),
   setRenderModeValue: value => {
     renderMode.value = value
   },
+  setPreviewFontCssUrlValue: (value, options) => {
+    previewFont.applyPreviewFontCssUrl(value, options)
+  },
   getActiveWorkspaceTab,
   onActiveWorkspaceTabChange: (_tab, { changed } = {}) => {
     syncDiagnosticsDrawerLayout()
@@ -948,6 +972,13 @@ const {
   onWorkspaceRecordApplied: onWorkspaceRecordAppliedWithStatusMetadata,
 })
 
+const applyWorkspaceFontCssUrl = createApplyWorkspaceFontCssUrl({
+  previewFont,
+  flushWorkspaceSave,
+  normalizePreviewFontCssUrl,
+  defaultPreviewFontCssUrl,
+})
+
 const { syncActiveWorkspaceRepositoryScope, forkWorkspaceFromCurrentState } =
   createWorkspaceScopeForkActions({
     toNonEmptyWorkspaceText,
@@ -1201,6 +1232,8 @@ const githubWorkflows = createGitHubWorkflowsSetup({
     workspacesShare,
     workspacesNew,
     workspacesSelect,
+    workspacesFontCssUrlInput,
+    workspacesFontCssUrlLoad,
     workspacesOpen,
     workspacesRename,
     workspacesRemove,
@@ -1220,6 +1253,7 @@ const githubWorkflows = createGitHubWorkflowsSetup({
     listLocalContextRecords,
     refreshLocalContextOptions,
     applyWorkspaceRecord,
+    applyWorkspaceFontCssUrl,
     syncActiveWorkspaceRepositoryScope,
     forkWorkspaceFromCurrentState,
     flushWorkspaceSave,
@@ -1424,6 +1458,7 @@ const runtimeCoreOptions = createRuntimeCoreOptions({
   getRenderRuntime: () => renderRuntime,
   getPreviewHost: () => previewHost,
   previewBackground,
+  previewFont,
   clearDiagnosticsScope,
   clearConfirmDialog,
   clearConfirmTitle,
@@ -1602,6 +1637,7 @@ bindAppEventsAndStart({
     typeDiagnostics,
     clipboardSupported,
     previewBackground,
+    previewFont,
     initializeCodeEditors,
   },
 })
diff --git a/src/index.html b/src/index.html
index 4c30df0..8e08ae1 100644
--- a/src/index.html
+++ b/src/index.html
@@ -806,6 +806,26 @@ <h2 id="workspaces-title">Workspaces</h2>
             </div>
           </div>
 
+          <div class="workspaces-drawer__font-row">
+            <label
+              class="github-pr-field github-pr-field--full"
+              for="workspaces-font-css-url"
+            >
+              <span>Font Stylesheet URL</span>
+              <input
+                id="workspaces-font-css-url"
+                type="text"
+                autocomplete="off"
+                spellcheck="false"
+                aria-label="Workspace font stylesheet URL"
+                placeholder="https://cdn.example.com/fonts.css"
+              />
+            </label>
+            <button class="render-button" id="workspaces-font-css-url-load" type="button">
+              Load
+            </button>
+          </div>
+
           <label class="github-pr-field github-pr-field--full" for="workspaces-select">
             <span>Workspace</span>
             <select id="workspaces-select" aria-label="Stored workspace">
diff --git a/src/modules/app-core/app-bindings-startup.js b/src/modules/app-core/app-bindings-startup.js
index 9e1b869..7eacb25 100644
--- a/src/modules/app-core/app-bindings-startup.js
+++ b/src/modules/app-core/app-bindings-startup.js
@@ -120,6 +120,7 @@ const bindAppEventsAndStart = ({
     typeDiagnostics,
     clipboardSupported,
     previewBackground,
+    previewFont,
     initializeCodeEditors,
   } = startup
 
@@ -495,6 +496,7 @@ const bindAppEventsAndStart = ({
   syncDiagnosticsDrawerLayout()
   renderRuntime.setStyleCompiling(false)
   setCdnLoading(true)
+  previewFont.initializePreviewFontInput()
   previewBackground.initializePreviewBackgroundPicker()
   const workspaceRestoreReady = (async () => {
     try {
diff --git a/src/modules/app-core/app-composition-options.js b/src/modules/app-core/app-composition-options.js
index 6ea4791..d3cd596 100644
--- a/src/modules/app-core/app-composition-options.js
+++ b/src/modules/app-core/app-composition-options.js
@@ -36,6 +36,7 @@ const createRuntimeCoreOptions = ({
   getRenderRuntime,
   getPreviewHost,
   previewBackground,
+  previewFont,
   clearDiagnosticsScope,
   clearConfirmDialog,
   clearConfirmTitle,
@@ -99,6 +100,8 @@ const createRuntimeCoreOptions = ({
     getWorkspaceTabs: () => buildWorkspaceTabsSnapshot(),
     getPreviewHost,
     getPreviewBackgroundColor: () => previewBackground.getPreviewBackgroundColor(),
+    getPreviewFontCssUrl: () => previewFont.getPreviewFontCssUrl(),
+    getPreviewFontFamily: () => previewFont.getPreviewFontFamily(),
     clearStyleDiagnostics: () => clearDiagnosticsScope('styles'),
     setStyleDiagnosticsDetails,
     setStatus,
@@ -280,6 +283,7 @@ const createAppStartupBindingsOptions = ({
   setTypeDiagnosticsDetails,
   setCdnLoading,
   previewBackground,
+  previewFont,
   loadPreferredWorkspaceContext,
   initializeCodeEditors,
   getActiveWorkspaceTab,
@@ -376,6 +380,7 @@ const createAppStartupBindingsOptions = ({
   setTypeDiagnosticsDetails,
   setCdnLoading,
   previewBackground,
+  previewFont,
   loadPreferredWorkspaceContext,
   initializeCodeEditors,
   getActiveWorkspaceTab,
diff --git a/src/modules/app-core/github-workflows-setup.js b/src/modules/app-core/github-workflows-setup.js
index 6bd863a..2edadb2 100644
--- a/src/modules/app-core/github-workflows-setup.js
+++ b/src/modules/app-core/github-workflows-setup.js
@@ -60,6 +60,7 @@ const createGitHubWorkflowsSetup = ({
     getWorkspaceTabContexts: actions.getWorkspaceTabContexts,
     applyWorkspaceTabContent: actions.applyWorkspaceTabContent,
     scheduleRender: actions.scheduleRender,
+    applyWorkspaceFontCssUrl: workspace.applyWorkspaceFontCssUrl,
   })
 
 export { createGitHubWorkflowsSetup }
diff --git a/src/modules/app-core/github-workflows.js b/src/modules/app-core/github-workflows.js
index 983cc4f..482f158 100644
--- a/src/modules/app-core/github-workflows.js
+++ b/src/modules/app-core/github-workflows.js
@@ -46,6 +46,8 @@ const initializeGitHubWorkflows = ({
   workspacesShare,
   workspacesNew,
   workspacesSelect,
+  workspacesFontCssUrlInput,
+  workspacesFontCssUrlLoad,
   workspacesOpen,
   workspacesRename,
   workspacesRemove,
@@ -59,6 +61,7 @@ const initializeGitHubWorkflows = ({
   listLocalContextRecords,
   refreshLocalContextOptions,
   applyWorkspaceRecord,
+  applyWorkspaceFontCssUrl,
   syncActiveWorkspaceRepositoryScope,
   forkWorkspaceFromCurrentState,
   flushWorkspaceSave,
@@ -432,6 +435,8 @@ const initializeGitHubWorkflows = ({
     shareButton: workspacesShare,
     newButton: workspacesNew,
     selectInput: workspacesSelect,
+    fontCssUrlInput: workspacesFontCssUrlInput,
+    fontCssUrlLoadButton: workspacesFontCssUrlLoad,
     openButton: workspacesOpen,
     renameButton: workspacesRename,
     removeButton: workspacesRemove,
@@ -540,8 +545,30 @@ const initializeGitHubWorkflows = ({
         return false
       }
     },
+    onLoadFontCssUrl: async fontCssUrl => {
+      if (typeof applyWorkspaceFontCssUrl !== 'function') {
+        return false
+      }
+
+      try {
+        const loadResult = await applyWorkspaceFontCssUrl(fontCssUrl)
+        if (typeof scheduleRender === 'function') {
+          await Promise.resolve(scheduleRender())
+        }
+        return loadResult
+      } catch {
+        workspacesDrawerController?.setStatus('Could not load font CSS URL.', 'error')
+        return false
+      }
+    },
     onOpenSelected: async workspaceId => {
       try {
+        try {
+          await flushWorkspaceSave?.({ preserveRecordId: true })
+        } catch {
+          /* Save failures are surfaced via saver onError; continue with open attempt. */
+        }
+
         const record = await workspaceStorage.getWorkspaceById(workspaceId)
         if (!record) {
           await refreshLocalContextOptions()
diff --git a/src/modules/app-core/preview-font-setup.js b/src/modules/app-core/preview-font-setup.js
new file mode 100644
index 0000000..6619741
--- /dev/null
+++ b/src/modules/app-core/preview-font-setup.js
@@ -0,0 +1,25 @@
+const createPreviewFontSetup = ({
+  createPreviewFontController,
+  previewFontCssUrlInput,
+  defaultPreviewFontCssUrl,
+  getRenderRuntime,
+  queueWorkspaceSave,
+}) => {
+  return createPreviewFontController({
+    previewFontCssUrlInput,
+    getDefaultPreviewFontCssUrl: () => defaultPreviewFontCssUrl,
+    onFontConfigChange: ({ fontCssUrl, fontFamily }) => {
+      const renderRuntime =
+        typeof getRenderRuntime === 'function' ? getRenderRuntime() : null
+      if (renderRuntime && typeof renderRuntime.updatePreviewFont === 'function') {
+        renderRuntime.updatePreviewFont({ fontCssUrl, fontFamily })
+      }
+
+      if (typeof queueWorkspaceSave === 'function') {
+        queueWorkspaceSave()
+      }
+    },
+  })
+}
+
+export { createPreviewFontSetup }
diff --git a/src/modules/app-core/workspace-context-controller.js b/src/modules/app-core/workspace-context-controller.js
index c5419af..49e58c7 100644
--- a/src/modules/app-core/workspace-context-controller.js
+++ b/src/modules/app-core/workspace-context-controller.js
@@ -18,8 +18,11 @@ const createWorkspaceContextController = ({
   workspaceTabsState,
   resolveWorkspaceActiveTabId,
   normalizeRenderMode,
+  normalizePreviewFontCssUrl,
   getRenderModeValue,
+  getPreviewFontCssUrlValue,
   setRenderModeValue,
+  setPreviewFontCssUrlValue,
   onWorkspaceRecordApplied,
   getActiveWorkspaceTab,
   loadWorkspaceTabIntoEditor,
@@ -140,6 +143,21 @@ const createWorkspaceContextController = ({
         setRenderModeValue(nextRenderMode)
       }
 
+      if (typeof setPreviewFontCssUrlValue === 'function') {
+        const nextPreviewFontCssUrl = normalizePreviewFontCssUrl(
+          workspace.fontCssUrl ?? workspace.previewFontCssUrl,
+        )
+        const currentPreviewFontCssUrl = normalizePreviewFontCssUrl(
+          getPreviewFontCssUrlValue?.(),
+        )
+        if (currentPreviewFontCssUrl !== nextPreviewFontCssUrl) {
+          setPreviewFontCssUrlValue(nextPreviewFontCssUrl, {
+            emitChange: true,
+            syncInputValue: true,
+          })
+        }
+      }
+
       const activeTab = getActiveWorkspaceTab()
       if (activeTab) {
         loadWorkspaceTabIntoEditor(activeTab)
diff --git a/src/modules/app-core/workspace-controllers-setup.js b/src/modules/app-core/workspace-controllers-setup.js
index c5ebb5a..434f8f1 100644
--- a/src/modules/app-core/workspace-controllers-setup.js
+++ b/src/modules/app-core/workspace-controllers-setup.js
@@ -29,8 +29,11 @@ const createWorkspaceControllersSetup = ({
   workspaceTabsState,
   resolveWorkspaceActiveTabId,
   normalizeRenderMode,
+  normalizePreviewFontCssUrl,
   getRenderModeValue,
+  getPreviewFontCssUrlValue,
   setRenderModeValue,
+  setPreviewFontCssUrlValue,
   onWorkspaceRecordApplied,
   getActiveWorkspaceTab,
   onActiveWorkspaceTabChange,
@@ -222,8 +225,11 @@ const createWorkspaceControllersSetup = ({
     workspaceTabsState,
     resolveWorkspaceActiveTabId,
     normalizeRenderMode,
+    normalizePreviewFontCssUrl,
     getRenderModeValue,
+    getPreviewFontCssUrlValue,
     setRenderModeValue,
+    setPreviewFontCssUrlValue,
     onWorkspaceRecordApplied,
     getActiveWorkspaceTab,
     loadWorkspaceTabIntoEditor,
diff --git a/src/modules/app-core/workspace-font-css-url-load.js b/src/modules/app-core/workspace-font-css-url-load.js
new file mode 100644
index 0000000..c02a571
--- /dev/null
+++ b/src/modules/app-core/workspace-font-css-url-load.js
@@ -0,0 +1,38 @@
+const createApplyWorkspaceFontCssUrl = ({
+  previewFont,
+  flushWorkspaceSave,
+  normalizePreviewFontCssUrl,
+  defaultPreviewFontCssUrl,
+}) => {
+  return async fontCssUrl => {
+    const requestedFontCssUrl = typeof fontCssUrl === 'string' ? fontCssUrl.trim() : ''
+    const normalizedFontCssUrl = normalizePreviewFontCssUrl(requestedFontCssUrl)
+    const defaultNormalizedFontCssUrl = normalizePreviewFontCssUrl(
+      defaultPreviewFontCssUrl,
+    )
+    const rejectedInput =
+      requestedFontCssUrl.length > 0 &&
+      normalizedFontCssUrl === defaultNormalizedFontCssUrl &&
+      requestedFontCssUrl !== defaultNormalizedFontCssUrl
+
+    previewFont.applyPreviewFontCssUrl(requestedFontCssUrl, {
+      emitChange: true,
+      syncInputValue: true,
+    })
+
+    await flushWorkspaceSave({ preserveRecordId: true })
+
+    return {
+      ok: !rejectedInput,
+      status: rejectedInput
+        ? 'rejected'
+        : requestedFontCssUrl !== normalizedFontCssUrl
+          ? 'normalized'
+          : 'loaded',
+      requestedFontCssUrl,
+      normalizedFontCssUrl,
+    }
+  }
+}
+
+export { createApplyWorkspaceFontCssUrl }
diff --git a/src/modules/app-core/workspace-sync-controller.js b/src/modules/app-core/workspace-sync-controller.js
index 1a07c7c..589f5f9 100644
--- a/src/modules/app-core/workspace-sync-controller.js
+++ b/src/modules/app-core/workspace-sync-controller.js
@@ -17,7 +17,9 @@ const createWorkspaceSyncController = ({
   getActiveWorkspaceRecordId,
   getActiveWorkspaceCreatedAt,
   getRenderModeValue,
+  getPreviewFontCssUrlValue = () => '',
   normalizeRenderMode,
+  normalizePreviewFontCssUrl = value => value,
 }) => {
   const removedWorkspaceTabPathsByWorkspaceKey = new Map()
 
@@ -399,6 +401,7 @@ const createWorkspaceSyncController = ({
       prTitle: normalizedPrTitle,
       prContextState: requestedPrContextState,
       renderMode: normalizeRenderMode(getRenderModeValue()),
+      fontCssUrl: normalizePreviewFontCssUrl(getPreviewFontCssUrlValue()),
       tabs: buildWorkspaceTabsSnapshot(),
       activeTabId: workspaceTabsState.getActiveTabId(),
       createdAt: getActiveWorkspaceCreatedAt() ?? Date.now(),
diff --git a/src/modules/font-css-url.js b/src/modules/font-css-url.js
new file mode 100644
index 0000000..977e265
--- /dev/null
+++ b/src/modules/font-css-url.js
@@ -0,0 +1,38 @@
+const defaultFontCssUrl =
+  'https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap'
+
+const resolveCurrentProtocol = () => {
+  if (typeof window === 'undefined' || !window?.location?.protocol) {
+    return ''
+  }
+
+  return String(window.location.protocol).toLowerCase()
+}
+
+const normalizeFontCssUrl = (
+  value,
+  { fallback = defaultFontCssUrl, currentProtocol = resolveCurrentProtocol() } = {},
+) => {
+  const normalized = typeof value === 'string' ? value.trim() : ''
+  if (!normalized) {
+    return fallback
+  }
+
+  try {
+    const parsed = new URL(normalized)
+    const protocol = parsed.protocol.toLowerCase()
+    const allowHttp = String(currentProtocol).toLowerCase() === 'http:'
+    if (protocol === 'http:' && !allowHttp) {
+      return fallback
+    }
+    if (protocol !== 'https:' && protocol !== 'http:') {
+      return fallback
+    }
+
+    return parsed.href
+  } catch {
+    return fallback
+  }
+}
+
+export { defaultFontCssUrl, normalizeFontCssUrl }
diff --git a/src/modules/preview-runtime/iframe-preview-executor.js b/src/modules/preview-runtime/iframe-preview-executor.js
index 48d8138..1d234b7 100644
--- a/src/modules/preview-runtime/iframe-preview-executor.js
+++ b/src/modules/preview-runtime/iframe-preview-executor.js
@@ -61,6 +61,8 @@ const createIframeShellDocument = ({ channelId, parentOrigin, importMap }) => {
           userStyleSheets: [],
           hostPadding: '',
           backgroundColor: '',
+          fontCssUrl: '',
+          fontFamily: '',
         },
       }
 
@@ -89,6 +91,30 @@ const createIframeShellDocument = ({ channelId, parentOrigin, importMap }) => {
         parent.postMessage(__knightedToMessage(type, payload), __knightedParentOrigin)
       }
 
+      const __knightedNormalizeFontCssUrl = value => {
+        const normalized = typeof value === 'string' ? value.trim() : ''
+        if (!normalized) {
+          return ''
+        }
+
+        try {
+          const parsed = new URL(normalized, window.location.href)
+          const protocol = parsed.protocol.toLowerCase()
+          const currentProtocol = String(window.location.protocol || '').toLowerCase()
+          const allowHttp = currentProtocol === 'http:'
+          if (protocol === 'http:' && !allowHttp) {
+            return ''
+          }
+          if (protocol !== 'https:' && protocol !== 'http:') {
+            return ''
+          }
+
+          return parsed.href
+        } catch {
+          return ''
+        }
+      }
+
       const __knightedToBaseStyles = hostPadding => {
         const resolvedPadding =
           typeof hostPadding === 'string' && hostPadding.trim().length > 0
@@ -111,15 +137,65 @@ const createIframeShellDocument = ({ channelId, parentOrigin, importMap }) => {
           '  padding: var(--preview-host-padding, ' + resolvedPadding + ');',
           '  overflow-y: auto;',
           '  overflow-x: hidden;',
+          '  font-family: var(--preview-font-family, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);',
+          '}',
+          'button, input, select, textarea {',
+          '  font: inherit;',
           '}',
         ].join('\\n')
       }
 
+      const __knightedSyncFontStylesheetLink = ({
+        normalizedFontCssUrl = '',
+        baseStyleElement,
+      }) => {
+        const linkId = 'knighted-preview-font-stylesheet'
+        const existingLink = document.getElementById(linkId)
+        const hasNormalizedFontCssUrl =
+          typeof normalizedFontCssUrl === 'string' &&
+          normalizedFontCssUrl.length > 0
+
+        if (!hasNormalizedFontCssUrl) {
+          if (existingLink instanceof HTMLLinkElement) {
+            existingLink.remove()
+          }
+          return
+        }
+
+        let linkElement = existingLink
+        if (!(linkElement instanceof HTMLLinkElement)) {
+          linkElement = document.createElement('link')
+          linkElement.id = linkId
+          linkElement.rel = 'stylesheet'
+        }
+
+        if (linkElement.getAttribute('href') !== normalizedFontCssUrl) {
+          linkElement.setAttribute('href', normalizedFontCssUrl)
+        }
+
+        const shouldInsertBeforeBase =
+          baseStyleElement instanceof HTMLStyleElement &&
+          baseStyleElement.parentNode === document.head
+
+        if (shouldInsertBeforeBase) {
+          if (linkElement !== baseStyleElement.previousSibling) {
+            document.head.insertBefore(linkElement, baseStyleElement)
+          }
+          return
+        }
+
+        if (linkElement.parentNode !== document.head) {
+          document.head.append(linkElement)
+        }
+      }
+
       const __knightedApplyVisualConfig = ({
         cssText = '',
         userStyleSheets = [],
         hostPadding = '',
         backgroundColor = '',
+        fontCssUrl = '',
+        fontFamily = '',
       }) => {
         const normalizedUserStyleSheets = Array.isArray(userStyleSheets)
           ? userStyleSheets
@@ -137,6 +213,8 @@ const createIframeShellDocument = ({ channelId, parentOrigin, importMap }) => {
           userStyleSheets: desiredUserStyleSheets,
           hostPadding: typeof hostPadding === 'string' ? hostPadding : '',
           backgroundColor: typeof backgroundColor === 'string' ? backgroundColor : '',
+          fontCssUrl: __knightedNormalizeFontCssUrl(fontCssUrl),
+          fontFamily: typeof fontFamily === 'string' ? fontFamily : '',
         }
 
         let baseStyleElement = document.getElementById('knighted-preview-base-styles')
@@ -199,6 +277,11 @@ const createIframeShellDocument = ({ channelId, parentOrigin, importMap }) => {
           document.head.insertBefore(baseStyleElement, firstUserStyleElement)
         }
 
+        __knightedSyncFontStylesheetLink({
+          normalizedFontCssUrl: __knightedState.visualConfig.fontCssUrl,
+          baseStyleElement,
+        })
+
         baseStyleElement.textContent = __knightedToBaseStyles(
           __knightedState.visualConfig.hostPadding,
         )
@@ -219,6 +302,15 @@ const createIframeShellDocument = ({ channelId, parentOrigin, importMap }) => {
           document.documentElement.style.removeProperty('--preview-host-padding')
         }
 
+        if (__knightedState.visualConfig.fontFamily.trim().length > 0) {
+          document.documentElement.style.setProperty(
+            '--preview-font-family',
+            __knightedState.visualConfig.fontFamily.trim(),
+          )
+        } else {
+          document.documentElement.style.removeProperty('--preview-font-family')
+        }
+
         if (__knightedState.visualConfig.backgroundColor.length > 0) {
           document.documentElement.style.backgroundColor =
             __knightedState.visualConfig.backgroundColor
@@ -639,6 +731,8 @@ export const createWorkspaceIframePreviewBridge = ({
     userStyleSheets = [],
     hostPadding = '',
     backgroundColor = '',
+    fontCssUrl = '',
+    fontFamily = '',
     runtimeSpecifiers,
     timeoutMs = 12000,
   }) => {
@@ -666,6 +760,7 @@ export const createWorkspaceIframePreviewBridge = ({
             dispose,
             render,
             updateBackgroundColor,
+            updateFont,
           })
         },
         reject,
@@ -686,6 +781,8 @@ export const createWorkspaceIframePreviewBridge = ({
         ...stylePayload,
         hostPadding,
         backgroundColor,
+        fontCssUrl,
+        fontFamily,
         importMap,
         parentOrigin,
       }
@@ -712,12 +809,23 @@ export const createWorkspaceIframePreviewBridge = ({
     })
   }
 
+  const updateFont = ({ fontCssUrl = '', fontFamily = '' } = {}) => {
+    postMessageToIframe({
+      type: previewProtocolMessageTypes.configPatch,
+      payload: {
+        fontCssUrl: typeof fontCssUrl === 'string' ? fontCssUrl : '',
+        fontFamily: typeof fontFamily === 'string' ? fontFamily : '',
+      },
+    })
+  }
+
   return {
     target,
     iframe,
     dispose,
     render,
     updateBackgroundColor,
+    updateFont,
     isReady: () => ready,
   }
 }
diff --git a/src/modules/preview/preview-font.js b/src/modules/preview/preview-font.js
new file mode 100644
index 0000000..92fa577
--- /dev/null
+++ b/src/modules/preview/preview-font.js
@@ -0,0 +1,110 @@
+import { defaultFontCssUrl, normalizeFontCssUrl } from '../font-css-url.js'
+
+const systemSansFontFamily =
+  'system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif'
+
+const defaultPreviewFontCssUrl = defaultFontCssUrl
+
+const normalizePreviewFontCssUrl = value =>
+  normalizeFontCssUrl(value, { fallback: defaultPreviewFontCssUrl })
+
+const decodeGoogleFontsFamilyName = value => {
+  if (typeof value !== 'string' || value.length === 0) {
+    return ''
+  }
+
+  const plusDecoded = value.replace(/\+/g, ' ')
+  const firstFamilySegment = plusDecoded.split('|')[0] || ''
+  const withoutAxes = firstFamilySegment.split(':')[0] || ''
+  try {
+    return decodeURIComponent(withoutAxes).trim()
+  } catch {
+    return withoutAxes.trim()
+  }
+}
+
+const resolvePreviewFontFamily = cssUrl => {
+  const normalizedCssUrl = normalizePreviewFontCssUrl(cssUrl)
+  if (!normalizedCssUrl) {
+    return systemSansFontFamily
+  }
+
+  try {
+    const parsed = new URL(normalizedCssUrl)
+    const familyParams = parsed.searchParams.getAll('family')
+    for (const familyParam of familyParams) {
+      const decodedFamilyName = decodeGoogleFontsFamilyName(familyParam)
+      if (!decodedFamilyName) {
+        continue
+      }
+
+      const escapedFamilyName = decodedFamilyName.replace(/"/g, '\\"')
+      return `"${escapedFamilyName}", ${systemSansFontFamily}`
+    }
+  } catch {
+    return systemSansFontFamily
+  }
+
+  return systemSansFontFamily
+}
+
+export const createPreviewFontController = ({
+  previewFontCssUrlInput,
+  getDefaultPreviewFontCssUrl,
+  onFontConfigChange,
+}) => {
+  let previewFontCssUrl = defaultPreviewFontCssUrl
+
+  const applyPreviewFontCssUrl = (
+    cssUrl,
+    { emitChange = true, syncInputValue = true } = {},
+  ) => {
+    const normalizedCssUrl = normalizePreviewFontCssUrl(cssUrl)
+    previewFontCssUrl = normalizedCssUrl
+
+    if (
+      syncInputValue &&
+      previewFontCssUrlInput instanceof HTMLInputElement &&
+      previewFontCssUrlInput.value !== normalizedCssUrl
+    ) {
+      previewFontCssUrlInput.value = normalizedCssUrl
+    }
+
+    if (emitChange && typeof onFontConfigChange === 'function') {
+      onFontConfigChange({
+        fontCssUrl: normalizedCssUrl,
+        fontFamily: resolvePreviewFontFamily(normalizedCssUrl),
+      })
+    }
+  }
+
+  const initializePreviewFontInput = () => {
+    if (!(previewFontCssUrlInput instanceof HTMLInputElement)) {
+      return
+    }
+
+    const initialCssUrl =
+      typeof getDefaultPreviewFontCssUrl === 'function'
+        ? normalizePreviewFontCssUrl(getDefaultPreviewFontCssUrl())
+        : defaultPreviewFontCssUrl
+
+    applyPreviewFontCssUrl(initialCssUrl, {
+      emitChange: true,
+      syncInputValue: true,
+    })
+  }
+
+  return {
+    applyPreviewFontCssUrl,
+    getPreviewFontCssUrl: () => previewFontCssUrl,
+    getPreviewFontFamily: () => resolvePreviewFontFamily(previewFontCssUrl),
+    initializePreviewFontInput,
+  }
+}
+
+export {
+  defaultPreviewFontCssUrl,
+  normalizePreviewFontCssUrl,
+  resolvePreviewFontFamily,
+  systemSansFontFamily,
+}
diff --git a/src/modules/preview/render-runtime.js b/src/modules/preview/render-runtime.js
index ea6f8e6..6ad0b9c 100644
--- a/src/modules/preview/render-runtime.js
+++ b/src/modules/preview/render-runtime.js
@@ -18,6 +18,8 @@ export const createRenderRuntimeController = ({
   getWorkspaceTabs,
   getPreviewHost,
   getPreviewBackgroundColor = () => '',
+  getPreviewFontCssUrl = () => '',
+  getPreviewFontFamily = () => '',
   clearStyleDiagnostics,
   setStyleDiagnosticsDetails,
   setStatus,
@@ -44,12 +46,15 @@ export const createRenderRuntimeController = ({
   }
   let disposeWorkspaceVirtualModules = null
   let iframeRuntimeBridge = null
+  let forceRecreateIframeBridgeOnNextRender = false
   let lastRenderedEntryTabId = ''
   let lastRenderedDependencyTabIds = new Set()
+  let lastRenderedHasCustomElementDefinitions = false
   let hasCompletedInitialRender = false
   const workspaceGraphCache = createPreviewWorkspaceGraphCache()
   const styleTabLanguages = new Set(['css', 'less', 'sass', 'module'])
   const stylePathPattern = /\.(?:css|less|sass|scss)$/i
+  const customElementDefinePattern = /\bcustomElements\s*\.\s*define\s*\(/i
   const fallbackEntryTab = {
     id: 'component',
     name: 'App.tsx',
@@ -693,6 +698,15 @@ export const createRenderRuntimeController = ({
     reactDomClient: getRuntimeSpecifier('reactDomClient'),
   })
 
+  const hasCustomElementDefinition = tab => {
+    if (!tab || typeof tab !== 'object') {
+      return false
+    }
+
+    const source = typeof tab.content === 'string' ? tab.content : ''
+    return customElementDefinePattern.test(source)
+  }
+
   const renderWorkspaceInIframe = async ({
     mode,
     cssText,
@@ -751,12 +765,23 @@ export const createRenderRuntimeController = ({
         ? virtualModulePlan.includedTabIds
         : [],
     )
+    lastRenderedHasCustomElementDefinitions = [...lastRenderedDependencyTabIds].some(
+      tabId => {
+        const tab = tabsForExecution.find(candidate => candidate?.id === tabId)
+        return hasCustomElementDefinition(tab)
+      },
+    )
 
     disposeWorkspaceModules()
     disposeWorkspaceVirtualModules = virtualModulePlan.dispose
 
     try {
       const renderTarget = getRenderTarget()
+      if (forceRecreateIframeBridgeOnNextRender) {
+        disposeIframeBridge()
+        forceRecreateIframeBridgeOnNextRender = false
+      }
+
       if (!iframeRuntimeBridge || iframeRuntimeBridge.target !== renderTarget) {
         disposeIframeBridge()
         iframeRuntimeBridge = createWorkspaceIframePreviewBridge({
@@ -778,6 +803,8 @@ export const createRenderRuntimeController = ({
         userStyleSheets,
         hostPadding,
         backgroundColor: getPreviewBackgroundColor(),
+        fontCssUrl: getPreviewFontCssUrl(),
+        fontFamily: getPreviewFontFamily(),
         runtimeSpecifiers,
       })
     } catch (error) {
@@ -790,6 +817,8 @@ export const createRenderRuntimeController = ({
   const clearPreview = () => {
     disposeWorkspaceModules()
     disposeIframeBridge()
+    forceRecreateIframeBridgeOnNextRender = false
+    lastRenderedHasCustomElementDefinitions = false
     const target = getRenderTarget()
     clearTarget(target)
   }
@@ -927,6 +956,9 @@ export const createRenderRuntimeController = ({
     }
 
     if (lastRenderedDependencyTabIds.has(tabId)) {
+      if (lastRenderedHasCustomElementDefinitions) {
+        forceRecreateIframeBridgeOnNextRender = true
+      }
       return true
     }
 
@@ -966,5 +998,10 @@ export const createRenderRuntimeController = ({
         iframeRuntimeBridge.updateBackgroundColor(color)
       }
     },
+    updatePreviewFont: ({ fontCssUrl = '', fontFamily = '' } = {}) => {
+      if (iframeRuntimeBridge && typeof iframeRuntimeBridge.updateFont === 'function') {
+        iframeRuntimeBridge.updateFont({ fontCssUrl, fontFamily })
+      }
+    },
   }
 }
diff --git a/src/modules/workspace/workspace-storage.js b/src/modules/workspace/workspace-storage.js
index 2df6e74..30195c5 100644
--- a/src/modules/workspace/workspace-storage.js
+++ b/src/modules/workspace/workspace-storage.js
@@ -1,4 +1,5 @@
 import { cdnImports, importFromCdnWithFallback } from '../cdn.js'
+import { normalizeFontCssUrl } from '../font-css-url.js'
 import { toWorkspaceRecordKey } from './workspace-tab-helpers.js'
 
 const workspaceDbName = 'knighted-develop-workspaces'
@@ -23,6 +24,9 @@ const toTabRole = value => {
 
 const normalizeRenderMode = value => (value === 'react' ? 'react' : 'dom')
 
+const normalizeStoredPreviewFontCssUrl = value =>
+  normalizeFontCssUrl(value, { fallback: '' })
+
 const toSyncTimestamp = value =>
   Number.isFinite(value) && value > 0 ? Math.max(0, Number(value)) : null
 
@@ -112,6 +116,9 @@ const normalizeWorkspaceRecord = record => {
         ? record.prContextState.trim()
         : 'inactive',
     renderMode: normalizeRenderMode(record.renderMode),
+    fontCssUrl: normalizeStoredPreviewFontCssUrl(
+      record.fontCssUrl ?? record.previewFontCssUrl,
+    ),
     tabs: normalizedTabs,
     activeTabId: typeof record.activeTabId === 'string' ? record.activeTabId : null,
     schemaVersion:
@@ -164,8 +171,47 @@ const withLastModifiedNow = record => ({
   lastModified: Date.now(),
 })
 
+const hasOwnRecordValue = (record, key) =>
+  Boolean(record) && Object.prototype.hasOwnProperty.call(record, key)
+
+const backfillWorkspaceFontCssUrlField = async db => {
+  const transaction = db.transaction(workspaceStoreName, 'readwrite')
+  const index = transaction.store.index(workspaceByLastModifiedIndexName)
+  const processCursor = async cursor => {
+    if (!cursor) {
+      return
+    }
+
+    const record = cursor.value
+    if (record && typeof record === 'object') {
+      const normalizedFontCssUrl = normalizeStoredPreviewFontCssUrl(
+        record.fontCssUrl ?? record.previewFontCssUrl,
+      )
+      const shouldPersistFontCssUrl =
+        !hasOwnRecordValue(record, 'fontCssUrl') ||
+        typeof record.fontCssUrl !== 'string' ||
+        record.fontCssUrl !== normalizedFontCssUrl
+
+      if (shouldPersistFontCssUrl) {
+        await cursor.update({
+          ...record,
+          fontCssUrl: normalizedFontCssUrl,
+        })
+      }
+    }
+
+    const nextCursor = await cursor.continue()
+    await processCursor(nextCursor)
+  }
+
+  await processCursor(await index.openCursor())
+
+  await transaction.done
+}
+
 export const createWorkspaceStorageAdapter = ({ loadRuntime } = {}) => {
   let dbPromise = null
+  let fontCssUrlBackfillPromise = null
 
   const ensureDb = () => {
     if (!dbPromise) {
@@ -175,6 +221,14 @@ export const createWorkspaceStorageAdapter = ({ loadRuntime } = {}) => {
       })
     }
 
+    if (!fontCssUrlBackfillPromise) {
+      fontCssUrlBackfillPromise = dbPromise
+        .then(backfillWorkspaceFontCssUrlField)
+        .catch(() => {
+          /* If backfill fails, continue with existing records to avoid blocking app load. */
+        })
+    }
+
     return dbPromise
   }
 
diff --git a/src/modules/workspace/workspaces-drawer/drawer.js b/src/modules/workspace/workspaces-drawer/drawer.js
index 7b8b83e..be0a0b6 100644
--- a/src/modules/workspace/workspaces-drawer/drawer.js
+++ b/src/modules/workspace/workspaces-drawer/drawer.js
@@ -51,6 +51,8 @@ export const createWorkspacesDrawer = ({
   shareButton,
   newButton,
   selectInput,
+  fontCssUrlInput,
+  fontCssUrlLoadButton,
   openButton,
   renameButton,
   removeButton,
@@ -61,6 +63,7 @@ export const createWorkspacesDrawer = ({
   onRepositoryFilterChange,
   onRefreshRequested,
   onShareCurrentWorkspace,
+  onLoadFontCssUrl,
   onInitializeWorkspace,
   onCreateWorkspace,
   onOpenSelected,
@@ -230,6 +233,10 @@ export const createWorkspacesDrawer = ({
     if (removeButton instanceof HTMLButtonElement) {
       removeButton.disabled = !hasSelection || isSelectedWorkspaceActive
     }
+
+    if (fontCssUrlLoadButton instanceof HTMLButtonElement) {
+      fontCssUrlLoadButton.disabled = typeof onLoadFontCssUrl !== 'function'
+    }
   }
 
   const renderOptions = () => {
@@ -554,6 +561,51 @@ export const createWorkspacesDrawer = ({
     }
   })
 
+  fontCssUrlLoadButton?.addEventListener('click', async () => {
+    if (typeof onLoadFontCssUrl !== 'function') {
+      return
+    }
+
+    const fontCssUrlValue =
+      fontCssUrlInput instanceof HTMLInputElement ? toSafeText(fontCssUrlInput.value) : ''
+
+    let loadResult = false
+    try {
+      loadResult = await onLoadFontCssUrl(fontCssUrlValue)
+    } catch {
+      setStatus('Could not load font CSS URL.', 'error')
+      return
+    }
+
+    if (!loadResult) {
+      return
+    }
+
+    if (loadResult && typeof loadResult === 'object') {
+      const status = toSafeText(loadResult.status)
+      if (status === 'rejected') {
+        setStatus('Invalid font CSS URL. Loaded default value instead.', 'error')
+        return
+      }
+
+      if (status === 'normalized') {
+        setStatus('Loaded normalized font CSS URL.', 'neutral')
+        return
+      }
+    }
+
+    setStatus('Loaded font CSS URL.', 'neutral')
+  })
+
+  fontCssUrlInput?.addEventListener('keydown', event => {
+    if (event.key !== 'Enter') {
+      return
+    }
+
+    event.preventDefault()
+    fontCssUrlLoadButton?.click()
+  })
+
   openButton?.addEventListener('click', async () => {
     const id = toSafeText(selectedId)
     if (!id || typeof onOpenSelected !== 'function') {
diff --git a/src/styles/ai-controls.css b/src/styles/ai-controls.css
index f1691cc..47e3555 100644
--- a/src/styles/ai-controls.css
+++ b/src/styles/ai-controls.css
@@ -598,6 +598,25 @@
   gap: 8px;
 }
 
+.workspaces-drawer__font-row {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  align-items: end;
+  gap: 8px;
+}
+
+.workspaces-drawer__font-row .github-pr-field--full {
+  grid-column: auto;
+}
+
+.workspaces-drawer__font-row .render-button {
+  height: 36px;
+  width: auto;
+  min-width: fit-content;
+  padding-inline: 12px;
+  white-space: nowrap;
+}
+
 .workspaces-drawer__actions[hidden] {
   display: none;
 }