feat: add terminal font settings and built-in Nerd Font (#23391)

2026-04-20 12:51:13 +08:00 · 2026-04-19 19:46:34 +10:00
parent c09bcfe531
commit 10bd044c55
22 changed files with 105 additions and 20 deletions
--- a/packages/app/public/assets/JetBrainsMonoNerdFontMono-Regular.woff2
+++ b/packages/app/public/assets/JetBrainsMonoNerdFontMono-Regular.woff2
--- a/packages/app/src/components/settings-general.tsx
+++ b/packages/app/src/components/settings-general.tsx
@@ -19,6 +19,9 @@ import {
  sansDefault,
  sansFontFamily,
  sansInput,
+  terminalDefault,
+  terminalFontFamily,
+  terminalInput,
  useSettings,
 } from "@/context/settings"
 import { decode64 } from "@/utils/base64"
@@ -181,6 +184,7 @@ export const SettingsGeneral: Component = () => {
  const soundOptions = [noneSound, ...SOUND_OPTIONS]
  const mono = () => monoInput(settings.appearance.font())
  const sans = () => sansInput(settings.appearance.uiFont())
+  const terminal = () => terminalInput(settings.appearance.terminalFont())

  const soundSelectProps = (
    enabled: () => boolean,
@@ -451,6 +455,29 @@ export const SettingsGeneral: Component = () => {
            />
          </div>
        </SettingsRow>
+
+        <SettingsRow
+          title={language.t("settings.general.row.terminalFont.title")}
+          description={language.t("settings.general.row.terminalFont.description")}
+        >
+          <div class="w-full sm:w-[220px]">
+            <TextField
+              data-action="settings-terminal-font"
+              label={language.t("settings.general.row.terminalFont.title")}
+              hideLabel
+              type="text"
+              value={terminal()}
+              onChange={(value) => settings.appearance.setTerminalFont(value)}
+              placeholder={terminalDefault}
+              spellcheck={false}
+              autocorrect="off"
+              autocomplete="off"
+              autocapitalize="off"
+              class="text-12-regular"
+              style={{ "font-family": terminalFontFamily(settings.appearance.terminalFont()) }}
+            />
+          </div>
+        </SettingsRow>
      </SettingsList>
    </div>
  )
--- a/packages/app/src/components/terminal.tsx
+++ b/packages/app/src/components/terminal.tsx
@@ -11,7 +11,7 @@ import { useLanguage } from "@/context/language"
 import { usePlatform } from "@/context/platform"
 import { useSDK } from "@/context/sdk"
 import { useServer } from "@/context/server"
-import { monoFontFamily, useSettings } from "@/context/settings"
+import { terminalFontFamily, useSettings } from "@/context/settings"
 import type { LocalPTY } from "@/context/terminal"
 import { disposeIfDisposable, getHoveredLinkText, setOptionIfSupported } from "@/utils/runtime-adapters"
 import { terminalWriter } from "@/utils/terminal-writer"
@@ -300,7 +300,7 @@ export const Terminal = (props: TerminalProps) => {
  })

  createEffect(() => {
-    const font = monoFontFamily(settings.appearance.font())
+    const font = terminalFontFamily(settings.appearance.terminalFont())
    if (!term) return
    setOptionIfSupported(term, "fontFamily", font)
    scheduleFit()
@@ -360,7 +360,7 @@ export const Terminal = (props: TerminalProps) => {
        cols: restoreSize?.cols,
        rows: restoreSize?.rows,
        fontSize: 14,
-        fontFamily: monoFontFamily(settings.appearance.font()),
+        fontFamily: terminalFontFamily(settings.appearance.terminalFont()),
        allowTransparency: false,
        convertEol: false,
        theme: terminalColors(),
--- a/packages/app/src/context/settings.tsx
+++ b/packages/app/src/context/settings.tsx
@@ -39,6 +39,7 @@ export interface Settings {
    fontSize: number
    mono: string
    sans: string
+    terminal: string
  }
  keybinds: Record<string, string>
  permissions: {
@@ -50,13 +51,16 @@ export interface Settings {

 export const monoDefault = "System Mono"
 export const sansDefault = "System Sans"
+export const terminalDefault = "JetBrainsMono Nerd Font Mono"

 const monoFallback =
  'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace'
 const sansFallback = 'ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif'
+const terminalFallback = '"JetBrainsMono Nerd Font Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace'

 const monoBase = monoFallback
 const sansBase = sansFallback
+const terminalBase = terminalFallback

 function input(font: string | undefined) {
  return font ?? ""
@@ -89,6 +93,14 @@ export function sansFontFamily(font: string | undefined) {
  return stack(font, sansBase)
 }

+export function terminalInput(font: string | undefined) {
+  return input(font)
+}
+
+export function terminalFontFamily(font: string | undefined) {
+  return stack(font, terminalBase)
+}
+
 const defaultSettings: Settings = {
  general: {
    autoSave: true,
@@ -110,6 +122,7 @@ const defaultSettings: Settings = {
    fontSize: 14,
    mono: "",
    sans: "",
+    terminal: "",
  },
  keybinds: {},
  permissions: {
@@ -233,6 +246,10 @@ export const { use: useSettings, provider: SettingsProvider } = createSimpleCont
        setUIFont(value: string) {
          setStore("appearance", "sans", value.trim() ? value : "")
        },
+        terminalFont: withFallback(() => store.appearance?.terminal, defaultSettings.appearance.terminal),
+        setTerminalFont(value: string) {
+          setStore("appearance", "terminal", value.trim() ? value : "")
+        },
      },
      keybinds: {
        get: (action: string) => store.keybinds?.[action],
--- a/packages/app/src/i18n/ar.ts
+++ b/packages/app/src/i18n/ar.ts
@@ -565,7 +565,9 @@ export const dict = {
  "settings.general.row.theme.title": "السمة",
  "settings.general.row.theme.description": "تخصيص سمة OpenCode.",
  "settings.general.row.font.title": "خط الكود",
-  "settings.general.row.font.description": "خصّص الخط المستخدم في كتل التعليمات البرمجية والطرفيات",
+  "settings.general.row.font.description": "خصّص الخط المستخدم في كتل التعليمات البرمجية",
+  "settings.general.row.terminalFont.title": "Terminal Font",
+  "settings.general.row.terminalFont.description": "Customise the font used in the terminal",
  "settings.general.row.uiFont.title": "خط الواجهة",
  "settings.general.row.uiFont.description": "خصّص الخط المستخدم في الواجهة بأكملها",
  "settings.general.row.followup.title": "سلوك المتابعة",
--- a/packages/app/src/i18n/br.ts
+++ b/packages/app/src/i18n/br.ts
@@ -572,7 +572,9 @@ export const dict = {
  "settings.general.row.theme.title": "Tema",
  "settings.general.row.theme.description": "Personalize como o OpenCode é tematizado.",
  "settings.general.row.font.title": "Fonte de código",
-  "settings.general.row.font.description": "Personalize a fonte usada em blocos de código e terminais",
+  "settings.general.row.font.description": "Personalize a fonte usada em blocos de código",
+  "settings.general.row.terminalFont.title": "Terminal Font",
+  "settings.general.row.terminalFont.description": "Customise the font used in the terminal",
  "settings.general.row.uiFont.title": "Fonte da interface",
  "settings.general.row.uiFont.description": "Personalize a fonte usada em toda a interface",
  "settings.general.row.followup.title": "Comportamento de acompanhamento",
--- a/packages/app/src/i18n/bs.ts
+++ b/packages/app/src/i18n/bs.ts
@@ -637,7 +637,9 @@ export const dict = {
  "settings.general.row.theme.title": "Tema",
  "settings.general.row.theme.description": "Prilagodi temu OpenCode-a.",
  "settings.general.row.font.title": "Font za kod",
-  "settings.general.row.font.description": "Prilagodi font koji se koristi u blokovima koda i terminalima",
+  "settings.general.row.font.description": "Prilagodi font koji se koristi u blokovima koda",
+  "settings.general.row.terminalFont.title": "Terminal Font",
+  "settings.general.row.terminalFont.description": "Customise the font used in the terminal",
  "settings.general.row.uiFont.title": "UI font",
  "settings.general.row.uiFont.description": "Prilagodi font koji se koristi u cijelom interfejsu",
  "settings.general.row.followup.title": "Ponašanje nadovezivanja",
--- a/packages/app/src/i18n/da.ts
+++ b/packages/app/src/i18n/da.ts
@@ -632,7 +632,9 @@ export const dict = {
  "settings.general.row.theme.title": "Tema",
  "settings.general.row.theme.description": "Tilpas hvordan OpenCode er temabestemt.",
  "settings.general.row.font.title": "Kode-skrifttype",
-  "settings.general.row.font.description": "Tilpas skrifttypen, der bruges i kodeblokke og terminaler",
+  "settings.general.row.font.description": "Tilpas skrifttypen, der bruges i kodeblokke",
+  "settings.general.row.terminalFont.title": "Terminal Font",
+  "settings.general.row.terminalFont.description": "Customise the font used in the terminal",
  "settings.general.row.uiFont.title": "UI-skrifttype",
  "settings.general.row.uiFont.description": "Tilpas skrifttypen, der bruges i hele brugerfladen",
  "settings.general.row.followup.title": "Opfølgningsadfærd",
--- a/packages/app/src/i18n/de.ts
+++ b/packages/app/src/i18n/de.ts
@@ -582,7 +582,9 @@ export const dict = {
  "settings.general.row.theme.title": "Thema",
  "settings.general.row.theme.description": "Das Thema von OpenCode anpassen.",
  "settings.general.row.font.title": "Code-Schriftart",
-  "settings.general.row.font.description": "Die in Codeblöcken und Terminals verwendete Schriftart anpassen",
+  "settings.general.row.font.description": "Die in Codeblöcken verwendete Schriftart anpassen",
+  "settings.general.row.terminalFont.title": "Terminal Font",
+  "settings.general.row.terminalFont.description": "Customise the font used in the terminal",
  "settings.general.row.uiFont.title": "UI-Schriftart",
  "settings.general.row.uiFont.description": "Die im gesamten Interface verwendete Schriftart anpassen",
  "settings.general.row.followup.title": "Verhalten bei Folgefragen",
--- a/packages/app/src/i18n/en.ts
+++ b/packages/app/src/i18n/en.ts
@@ -735,7 +735,9 @@ export const dict = {
  "settings.general.row.theme.title": "Theme",
  "settings.general.row.theme.description": "Customise how OpenCode is themed.",
  "settings.general.row.font.title": "Code Font",
-  "settings.general.row.font.description": "Customise the font used in code blocks and terminals",
+  "settings.general.row.font.description": "Customise the font used in code blocks",
+  "settings.general.row.terminalFont.title": "Terminal Font",
+  "settings.general.row.terminalFont.description": "Customise the font used in the terminal",
  "settings.general.row.uiFont.title": "UI Font",
  "settings.general.row.uiFont.description": "Customise the font used throughout the interface",
  "settings.general.row.followup.title": "Follow-up behavior",
--- a/packages/app/src/i18n/es.ts
+++ b/packages/app/src/i18n/es.ts
@@ -640,7 +640,9 @@ export const dict = {
  "settings.general.row.theme.title": "Tema",
  "settings.general.row.theme.description": "Personaliza el tema de OpenCode.",
  "settings.general.row.font.title": "Fuente de código",
-  "settings.general.row.font.description": "Personaliza la fuente usada en bloques de código y terminales",
+  "settings.general.row.font.description": "Personaliza la fuente usada en bloques de código",
+  "settings.general.row.terminalFont.title": "Terminal Font",
+  "settings.general.row.terminalFont.description": "Customise the font used in the terminal",
  "settings.general.row.uiFont.title": "Fuente de la interfaz",
  "settings.general.row.uiFont.description": "Personaliza la fuente usada en toda la interfaz",
  "settings.general.row.followup.title": "Comportamiento de seguimiento",
--- a/packages/app/src/i18n/fr.ts
+++ b/packages/app/src/i18n/fr.ts
@@ -579,7 +579,9 @@ export const dict = {
  "settings.general.row.theme.title": "Thème",
  "settings.general.row.theme.description": "Personnaliser le thème d'OpenCode.",
  "settings.general.row.font.title": "Police de code",
-  "settings.general.row.font.description": "Personnaliser la police utilisée dans les blocs de code et les terminaux",
+  "settings.general.row.font.description": "Personnaliser la police utilisée dans les blocs de code",
+  "settings.general.row.terminalFont.title": "Terminal Font",
+  "settings.general.row.terminalFont.description": "Customise the font used in the terminal",
  "settings.general.row.uiFont.title": "Police de l'interface",
  "settings.general.row.uiFont.description": "Personnaliser la police utilisée dans toute l'interface",
  "settings.general.row.followup.title": "Comportement de suivi",
--- a/packages/app/src/i18n/ja.ts
+++ b/packages/app/src/i18n/ja.ts
@@ -569,7 +569,9 @@ export const dict = {
  "settings.general.row.theme.title": "テーマ",
  "settings.general.row.theme.description": "OpenCodeのテーマをカスタマイズします。",
  "settings.general.row.font.title": "コードフォント",
-  "settings.general.row.font.description": "コードブロックとターミナルで使用するフォントをカスタマイズします",
+  "settings.general.row.font.description": "コードブロックで使用するフォントをカスタマイズします",
+  "settings.general.row.terminalFont.title": "Terminal Font",
+  "settings.general.row.terminalFont.description": "Customise the font used in the terminal",
  "settings.general.row.uiFont.title": "UIフォント",
  "settings.general.row.uiFont.description": "インターフェース全体で使用するフォントをカスタマイズします",
  "settings.general.row.followup.title": "フォローアップの動作",
--- a/packages/app/src/i18n/ko.ts
+++ b/packages/app/src/i18n/ko.ts
@@ -566,7 +566,9 @@ export const dict = {
  "settings.general.row.theme.title": "테마",
  "settings.general.row.theme.description": "OpenCode 테마 사용자 지정",
  "settings.general.row.font.title": "코드 글꼴",
-  "settings.general.row.font.description": "코드 블록과 터미널에 사용되는 글꼴을 사용자 지정",
+  "settings.general.row.font.description": "코드 블록에 사용되는 글꼴을 사용자 지정",
+  "settings.general.row.terminalFont.title": "Terminal Font",
+  "settings.general.row.terminalFont.description": "Customise the font used in the terminal",
  "settings.general.row.uiFont.title": "UI 글꼴",
  "settings.general.row.uiFont.description": "인터페이스 전반에 사용되는 글꼴을 사용자 지정",
  "settings.general.row.followup.title": "후속 조치 동작",
--- a/packages/app/src/i18n/no.ts
+++ b/packages/app/src/i18n/no.ts
@@ -640,7 +640,9 @@ export const dict = {
  "settings.general.row.theme.title": "Tema",
  "settings.general.row.theme.description": "Tilpass hvordan OpenCode er tematisert.",
  "settings.general.row.font.title": "Kodefont",
-  "settings.general.row.font.description": "Tilpass skrifttypen som brukes i kodeblokker og terminaler",
+  "settings.general.row.font.description": "Tilpass skrifttypen som brukes i kodeblokker",
+  "settings.general.row.terminalFont.title": "Terminal Font",
+  "settings.general.row.terminalFont.description": "Customise the font used in the terminal",
  "settings.general.row.uiFont.title": "UI-skrift",
  "settings.general.row.uiFont.description": "Tilpass skrifttypen som brukes i hele grensesnittet",
  "settings.general.row.followup.title": "Oppfølgingsadferd",
--- a/packages/app/src/i18n/pl.ts
+++ b/packages/app/src/i18n/pl.ts
@@ -571,7 +571,9 @@ export const dict = {
  "settings.general.row.theme.title": "Motyw",
  "settings.general.row.theme.description": "Dostosuj motyw OpenCode.",
  "settings.general.row.font.title": "Czcionka kodu",
-  "settings.general.row.font.description": "Dostosuj czcionkę używaną w blokach kodu i terminalach",
+  "settings.general.row.font.description": "Dostosuj czcionkę używaną w blokach kodu",
+  "settings.general.row.terminalFont.title": "Terminal Font",
+  "settings.general.row.terminalFont.description": "Customise the font used in the terminal",
  "settings.general.row.uiFont.title": "Czcionka interfejsu",
  "settings.general.row.uiFont.description": "Dostosuj czcionkę używaną w całym interfejsie",
  "settings.general.row.followup.title": "Zachowanie kontynuacji",
--- a/packages/app/src/i18n/ru.ts
+++ b/packages/app/src/i18n/ru.ts
@@ -637,7 +637,9 @@ export const dict = {
  "settings.general.row.theme.title": "Тема",
  "settings.general.row.theme.description": "Настройте оформление OpenCode.",
  "settings.general.row.font.title": "Шрифт кода",
-  "settings.general.row.font.description": "Настройте шрифт, используемый в блоках кода и терминалах",
+  "settings.general.row.font.description": "Настройте шрифт, используемый в блоках кода",
+  "settings.general.row.terminalFont.title": "Terminal Font",
+  "settings.general.row.terminalFont.description": "Customise the font used in the terminal",
  "settings.general.row.uiFont.title": "Шрифт интерфейса",
  "settings.general.row.uiFont.description": "Настройте шрифт, используемый во всем интерфейсе",
  "settings.general.row.followup.title": "Поведение уточняющих вопросов",
--- a/packages/app/src/i18n/th.ts
+++ b/packages/app/src/i18n/th.ts
@@ -631,7 +631,9 @@ export const dict = {
  "settings.general.row.theme.title": "ธีม",
  "settings.general.row.theme.description": "ปรับแต่งวิธีการที่ OpenCode มีธีม",
  "settings.general.row.font.title": "ฟอนต์โค้ด",
-  "settings.general.row.font.description": "ปรับแต่งฟอนต์ที่ใช้ในบล็อกโค้ดและเทอร์มินัล",
+  "settings.general.row.font.description": "ปรับแต่งฟอนต์ที่ใช้ในบล็อกโค้ด",
+  "settings.general.row.terminalFont.title": "Terminal Font",
+  "settings.general.row.terminalFont.description": "Customise the font used in the terminal",
  "settings.general.row.uiFont.title": "ฟอนต์ UI",
  "settings.general.row.uiFont.description": "ปรับแต่งฟอนต์ที่ใช้ทั่วทั้งอินเทอร์เฟซ",
  "settings.general.row.followup.title": "พฤติกรรมการติดตามผล",
--- a/packages/app/src/i18n/tr.ts
+++ b/packages/app/src/i18n/tr.ts
@@ -644,7 +644,9 @@ export const dict = {
  "settings.general.row.theme.title": "Tema",
  "settings.general.row.theme.description": "OpenCode'un temasını özelleştirin.",
  "settings.general.row.font.title": "Kod Yazı Tipi",
-  "settings.general.row.font.description": "Kod bloklarında ve terminallerde kullanılan yazı tipini özelleştirin",
+  "settings.general.row.font.description": "Kod bloklarında kullanılan yazı tipini özelleştirin",
+  "settings.general.row.terminalFont.title": "Terminal Font",
+  "settings.general.row.terminalFont.description": "Customise the font used in the terminal",
  "settings.general.row.uiFont.title": "Arayüz Yazı Tipi",
  "settings.general.row.uiFont.description": "Arayüz genelinde kullanılan yazı tipini özelleştirin",
  "settings.general.row.followup.title": "Takip davranışı",
--- a/packages/app/src/i18n/zh.ts
+++ b/packages/app/src/i18n/zh.ts
@@ -631,7 +631,9 @@ export const dict = {
  "settings.general.row.theme.title": "主题",
  "settings.general.row.theme.description": "自定义 OpenCode 的主题。",
  "settings.general.row.font.title": "代码字体",
-  "settings.general.row.font.description": "自定义代码块和终端使用的字体",
+  "settings.general.row.font.description": "自定义代码块使用的字体",
+  "settings.general.row.terminalFont.title": "Terminal Font",
+  "settings.general.row.terminalFont.description": "Customise the font used in the terminal",
  "settings.general.row.uiFont.title": "界面字体",
  "settings.general.row.uiFont.description": "自定义整个界面使用的字体",
  "settings.general.row.followup.title": "跟进消息行为",
--- a/packages/app/src/i18n/zht.ts
+++ b/packages/app/src/i18n/zht.ts
@@ -626,7 +626,9 @@ export const dict = {
  "settings.general.row.theme.title": "主題",
  "settings.general.row.theme.description": "自訂 OpenCode 的主題。",
  "settings.general.row.font.title": "程式碼字型",
-  "settings.general.row.font.description": "自訂程式碼區塊和終端機使用的字型",
+  "settings.general.row.font.description": "自訂程式碼區塊使用的字型",
+  "settings.general.row.terminalFont.title": "Terminal Font",
+  "settings.general.row.terminalFont.description": "Customise the font used in the terminal",
  "settings.general.row.uiFont.title": "介面字型",
  "settings.general.row.uiFont.description": "自訂整個介面使用的字型",
  "settings.general.row.followup.title": "後續追問行為",
--- a/packages/app/src/index.css
+++ b/packages/app/src/index.css
@@ -1,5 +1,12 @@
@import "@opencode-ai/ui/styles/tailwind";

+@font-face {
+  font-family: 'JetBrainsMono Nerd Font Mono';
+  src: url('/assets/JetBrainsMonoNerdFontMono-Regular.woff2') format('woff2');
+  font-weight: normal;
+  font-style: normal;
+}
+
@layer components {
  @keyframes session-progress-whip {
    0% {