Self-host VictorMono Nerd Font icons for the terminal + editor

- Add Symbols-Only Nerd Font Mono (woff2) under public/fonts; @font-face scoped
  by unicode-range to the Nerd Font glyph ranges, so the ~1.1MB file only loads
  when an icon actually renders (latin text stays on Victor Mono)
- Terminal + editor font stacks fall back to it for icons; terminal prewarms it
  and repaints so powerline/oh-my-posh/eza/nvim icons show
- No server/env changes; ships in the spoon-next image (public/)
This commit is contained in:
Gabriel Brown
2026-06-24 10:17:25 -04:00
parent c0ff6d8bed
commit c103430c7d
4 changed files with 27 additions and 2 deletions
Binary file not shown.
+16
View File
@@ -2,6 +2,22 @@
@import 'tw-animate-css'; @import 'tw-animate-css';
@import '@spoon/tailwind-config/theme'; @import '@spoon/tailwind-config/theme';
/*
* Nerd Font icons for the workspace terminal + editor. Scoped to the Nerd Font
* glyph ranges via unicode-range, so the ~1MB file is only fetched when an icon
* actually renders (latin text stays on Victor Mono). Used as a fallback in the
* terminal/editor font stacks.
*/
@font-face {
font-family: 'Symbols Nerd Font Mono';
font-style: normal;
font-weight: 100 900;
font-display: swap;
src: url('/fonts/SymbolsNerdFontMono.woff2') format('woff2');
unicode-range:
U+23fb-23fe, U+2665, U+26a1, U+2b58, U+e000-f8ff, U+f0000-fffff;
}
@source '../../../../packages/ui/src/**/*.{ts,tsx}'; @source '../../../../packages/ui/src/**/*.{ts,tsx}';
@custom-variant dark (&:where(.dark, .dark *)); @custom-variant dark (&:where(.dark, .dark *));
@@ -20,7 +20,7 @@ const MonacoEditor = dynamic(async () => await import('@monaco-editor/react'), {
}); });
const EDITOR_FONT_FAMILY = const EDITOR_FONT_FAMILY =
"var(--font-victor-mono), 'Geist Mono', ui-monospace, SFMono-Regular, monospace"; "var(--font-victor-mono), 'Symbols Nerd Font Mono', 'Geist Mono', ui-monospace, SFMono-Regular, monospace";
type MonacoEditorInstance = { type MonacoEditorInstance = {
getModel?: () => unknown; getModel?: () => unknown;
@@ -9,7 +9,7 @@ import { Button } from '@spoon/ui';
import '@xterm/xterm/css/xterm.css'; import '@xterm/xterm/css/xterm.css';
const TERMINAL_FONT = const TERMINAL_FONT =
"var(--font-victor-mono), 'Geist Mono', ui-monospace, monospace"; "var(--font-victor-mono), 'Symbols Nerd Font Mono', 'Geist Mono', ui-monospace, monospace";
type Status = 'connecting' | 'connected' | 'closed' | 'error' | 'unconfigured'; type Status = 'connecting' | 'connected' | 'closed' | 'error' | 'unconfigured';
@@ -146,6 +146,15 @@ export const WorkspaceTerminal = ({
fit.fit(); fit.fit();
termRef.current = term; termRef.current = term;
// Pull in the Nerd Font icon glyphs (loaded lazily by unicode-range) and
// repaint once ready so powerline/oh-my-posh/eza icons render.
void document.fonts
.load("16px 'Symbols Nerd Font Mono'", '\ue0b0')
.then(() => {
if (!isAborted()) term.refresh(0, term.rows - 1);
})
.catch(() => undefined);
const sendResize = () => { const sendResize = () => {
if (ws?.readyState !== WebSocket.OPEN) return; if (ws?.readyState !== WebSocket.OPEN) return;
ws.send( ws.send(