[FEATURE] vscode extension: font family and size

Note that, when I think of it, I only had to adjust font size for VSCode: the font families were somehow grabbed from my OS settings (Debian/KDE) automatically. This might well be a lead since VSCode somehow managed to find Deja Vu for sans-serif and Hack for monospace, even it it got the font size wrong until I configured it.

Found in reddit, worked for me:

You have to change the "Chat" settings - they are shared with Claude Code 2.0

// .vscode/settings.json
{
"chat.fontSize": 14
}

Found in reddit, worked for me: You have to change the "Chat" settings - they are shared with Claude Code 2.0 `` // .vscode/settings.json { "chat.fontSize": 14 } ``

worked for me - cursor

Found in reddit, worked for me: You have to change the "Chat" settings - they are shared with Claude Code 2.0 `` // .vscode/settings.json { "chat.fontSize": 14 } ``

Thanks a lot, this was very useful! I managed to change font sizes and chat (ie. sans-serif) font-family to be readable, which was the most painful. My only issue left now is the monospace font-family (couldn't find any setting for that), but monospace is much less painful so that's kinda ok.

-- for extension devs:
I have no idea if this is feasible in a VSCode extension, but perhaps somehow register as part of Claude those external config keys you use, so that they show up in the Claude settings? this would avoid a lot of friction.

+1 for Font Family Customization - Critical for RTL Languages

I'm experiencing the same issue, particularly with Persian (Farsi) text in the Claude Code VSCode extension.

Current Problem

• VSCode Editor/Terminal: Displays Persian text correctly using configured font (Vazirmatn)
• Claude Code Panel: Ignores VSCode font settings and uses default font, causing inconsistent rendering

Technical Details

Claude Code runs as a webview with its own CSS styling, independent of VSCode's terminal.integrated.fontFamily and editor.fontFamily settings. This makes it impossible to use proper fonts for RTL languages.

Impact on RTL Users

For Persian, Arabic, Hebrew, and Urdu users, this creates:

• Readability issues: Default fonts lack proper glyph support
• Visual inconsistency: Different fonts between Claude Code panel and rest of VSCode
• Poor UX: Professional fonts like Vazirmatn, Noto Sans Arabic are ignored

Proposed Solution

Add font customization to Claude Code settings:

Option 1: VSCode Settings

{
  "claudeCode.fontFamily": "Vazirmatn, Noto Sans Arabic, monospace",
  "claudeCode.fontSize": 14
}

Option 2: ~/.claude/settings.json

{
  "ui": {
    "fontFamily": "Vazirmatn, Noto Sans Arabic, monospace",
    "fontSize": 14
  }
}

This would significantly improve the experience for non-Latin script users.

Related Issues

• #11050 (RTL Support)
• #6751 (RTL in VS Code)
• #14414 (Right-to-left language support)

chat.fontSize worked for me as well but doesn't change the font size of the inline diffs.

You can change the font family in .vscode/settings.json:

{
  "chat.fontFamily": "Menlo"
}

This issue has been inactive for 30 days. If the issue is still occurring, please comment to let us know. Otherwise, this issue will be automatically closed in 30 days for housekeeping purposes.

chat.fontFamily is set to Aptos (Body) for me, but the Claude extension doesn't seem to respect that; the font used between GitHub Copilot Chat and Claude are totally different, with the latter being highly stylised and difficult to read.

These works for me in Fedora Linux and VS code.
Open settings JSON: Ctrl + Shift + P → "Preferences: Open User Settings (JSON)"
Add these lines:
"chat.fontSize": 16,
"chat.fontFamily": "'JetBrains Mono', monospace"

... and installing this font, if you like it
sudo dnf install jetbrains-mono-fonts # Fedora/RHEL
sudo apt install fonts-jetbrains-mono # Ubuntu/Debian

Found in reddit, worked for me: You have to change the "Chat" settings - they are shared with Claude Code 2.0 `` // .vscode/settings.json { "chat.fontSize": 14 } ``

You're a lifesaver

That works however, annoyingly, this does not apply to the codeblocks and inline codeblocks in the chat. That is still using the webview's defualt. Mine is Times New Roman.

Yes the times roman font for code is exceptionally bad - it should use mono sized font and not a smal serif font. Options for both the normal font size and type and codeblocks are urgently needed. It is quite hard to read changed code in the chat.

Yes the times roman font for code is exceptionally bad - it should use mono sized font and not a smal serif font. Options for both the normal font size and type and codeblocks are urgently needed. It is quite hard to read changed code in the chat.

The fact that I couldn't change this made me unsubscribe from Claude. It's impossible to stare at tiny Times New Roman all day, and I'm not changing the overall font size of VSCode as a whole just to cope with it.

+1 on this. The VS Code extension chat panel currently ignores the editor's font settings — the webview reads --vscode-chat-font-family, but no VS Code setting (chat.fontFamily, etc.) populates it, so the message text falls back to the browser default (Times). Setting chat.fontFamily / chat.fontSize in settings.json has no effect.

The only workaround is window.zoomLevel, which scales the entire IDE rather than just the panel.

My use case: I read a lot of long-form text in the chat and would like a reading-oriented serif (e.g. Source Serif / Lora / Georgia) at a slightly larger size, independent from the code editor (which should stay monospace). A simple claudeCode.fontFamily + claudeCode.fontSize pair, applied only to the panel, would solve this cleanly.

Still a problem with extension version 2.1.201:

<img width="731" height="258" alt="Image" src="https://github.com/user-attachments/assets/a82cc9c5-31a7-464e-b397-8b0da1dea842" />

<img width="873" height="517" alt="Image" src="https://github.com/user-attachments/assets/94adbf33-6854-4ebc-9a77-f9432797cfbe" />

TL;DR VS Code Extension: Claude Code UI Patch

The (non-exhaustive) list of feature requests: #11651 (this thread), #21769, #29756, #34196, #44248, #58908, #59959, #60077, #69289 ...

Until official support lands, a minimal UI patch with configurable font sizes (plural):

Every Knob, One Panel

| Before (native sizes) | After (patched) |
| :---: | :---: |
| <img src="https://raw.githubusercontent.com/zeyutang/claude-code-ui-patch/420a26c2a53933dcc7ead77572a15f80a93c9bf7/docs/img/before-ui-patch.png" width="360"> | <img src="https://raw.githubusercontent.com/zeyutang/claude-code-ui-patch/420a26c2a53933dcc7ead77572a15f80a93c9bf7/docs/img/after-ui-patch.png" width="360"> |

What UI Patch Can Configure

1. Chat panel or tab

| Setting | Native | Target |
| ------------------------------------------- | ------------------------- | ------------------------------------------------------------ |
| chat.fontSize | ~14px | chat panel/tab text, input, IN/OUT blocks |
| claudeCodeUiPatch.chatCodeblockFontSize | ~11px | chat panel/tab fenced code blocks |
| claudeCodeUiPatch.chatDiffCardFontSize | 12px | diff card (Edit/MultiEdit tool cards and their expand modal) |
| claudeCodeUiPatch.chatDiffCardLineNumbers | off | diff-card line numbers, with real +/- gutter signs |
| claudeCodeUiPatch.chatDiffCardThemeSync | off (forces dark theme) | diff card follows the VS Code light/dark theme |

2. Plan-mode Markdown preview

| Setting | Native | Target |
| --------------------------------------------------- | ------ | ---------------------------------------------- |
| claudeCodeUiPatch.planPreviewFontSize | 14px | Markdown preview text (headings scale with it) |
| claudeCodeUiPatch.planPreviewCodeblockFontSize | 13px | code blocks and inline code |
| claudeCodeUiPatch.planPreviewCommentQuoteFontSize | 12px | selected-text quote |
| claudeCodeUiPatch.planPreviewCommentInputFontSize | 13px | select-and-comment input |
| claudeCodeUiPatch.planPreviewCommentBadgeFontSize | 10px | comment badge (fixed 14px circle, keep <= 12) |

In conjunction with no font size or style parameters in settings-> general (only family) the size and location of the chat bar feels problematic. It's quite low and its single line input only compared to the home screen which is about 1/3rd of the way up the screen and built for multi-line input.