Skip to content

fix(web): load the bundled fonts in the terminal iframe - #402

Open
cbyrd01 wants to merge 1 commit into
google:mainfrom
cbyrd01:fix/terminal-font-fallback
Open

cbyrd01 wants to merge 1 commit into
google:mainfrom
cbyrd01:fix/terminal-font-fallback

Conversation

@cbyrd01

@cbyrd01 cbyrd01 commented Nov 10, 2026 •

Copy link
Copy Markdown

The terminal is its own iframe document (pages/vm/terminal.astro) and deliberately loads no global.css, which is where every bundled @font-face lived. Inside the terminal, a name like "Google Sans Code" matched nothing and the family list fell through to ui-monospace:

  • macOS: SF Mono. It looks fine, but the font picker in Settings has no effect on the terminal for any bundled font.
  • Linux (WebKitGTK): a proportional font, drawn into fixed-width cells, so there are gaps between characters.

Changes:

  • Move the @font-face rules to styles/fonts.css, imported by global.css and by the terminal page.
  • Fetch the chosen font before xterm measures its cells, at startup and when the setting changes. The rules use font-display: swap, so nothing requests the font before the terminal needs it.

The terminal page's CSP already allows font-src 'self'.

Tests. New terminal-fonts.test.ts (4 tests): every bundled font in the picker is declared in fonts.css, the terminal page imports it, and the font is requested before use. astro build succeeds and the built vm/terminal/index.html contains the font rules.

With the settings mock generated (build_system/scripts/build/check-generated-settings.sh), vitest run passes (82 files, 705 tests; main is 81 files, 701 tests) and pnpm run check reports 0 errors and 0 warnings.

Verified on Linux (WebKitGTK 2.54) with a build of main plus this commit, on a machine where ui-monospace resolves to a proportional font: the terminal renders in the selected monospace font.

🤖 Generated with Claude Code

The terminal is its own iframe document and deliberately loads no
global.css, which is where every bundled @font-face lived. Inside the
terminal a name like "Google Sans Code" therefore matched nothing and
the family list fell through to ui-monospace: SF Mono on macOS, so the
font picker silently had no effect there, and on Linux (WebKitGTK) a
proportional font, drawn into fixed-width cells with gaps between the
characters.

Move the @font-face rules to styles/fonts.css, imported by global.css
and by the terminal page. Fetch the chosen font before xterm measures
its cells, at startup and when the setting changes, since the rules use
font-display: swap and nothing else requests the font first.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant