How to change the font of Visual Studio Code's UI?

Question

I'm trying to figure out how to change the font used in non-editor tabs in Visual Studio Code; right now this is what I'm getting (zoom the picture to better see what I'm referring to):

As you can see, a Serif font is used on these non-editor tabs (extension info, Git Graph tab, etc.), making it quite unpleasant and really hard to read.

This happened all of a sudden, I'm quite sure that it is not the default and a nicer and more readable Sans font was used before (like on the left panel), until this problem occurred. I've tried to find if it is possible to change this from inside VSC, but I'm only able to change the fonts used in the editor tabs.

I don't know why and how this behavior has started, and I'm not really sure if this issue is caused by VSC itself, by an extension, by the OS, or something else.

If it matters, I'm working on Linux, on a fully updated openSUSE Tumbleweed with KDE, and like I said this problem started to manifest itself only recently, it was not how it worked by default.

Any clue on how to solve this?

Solution 1

Visual Studio Code does not offer convenient solution out of the box to change the UI font family.

But a developer created the Customize UI plugin for VS Code.

Setup

1. Install the Customize UI plugin
2. Restart VS Code
3. Open VS Code Settings
4. Change Customize UI Font:Monospace to Fira Code
5. Change Customize UI Font:Regular to Helvetica Nueve or Arial depending on your OS

Alternativaly, you can edit those settings using the json settings editor as follow:

    "customizeUI.font.regular": "Helvetica Nueve",
    "customizeUI.font.monospace": "Fira Code",

GitHub issue here

Solution 2

vscode is an electron app so you can actually just open up the developer tools in the help menu, look up the location of workbench.desktop.main.css under the source tab, make a backup and edit the font-family rule for your OS. There's a pretty gnarly-phrased notification that pops up about vscode being corrupted, however the linked-documentation is fairly clear it's just unsupported officially.

Comments

[鄭脈龍]

this is an old issue. try this extension