How to change the workbench font in visual studio code?

Question

I want to change the UI font in Visual Studio Code workbench.

I don't mean the editor, but everything else - panels, debug controls, watch, call stack, etc.

Mostly it's because of the Watch, where the values that I'm watching are displayed in an awful font on Debian, where the open/close parentheses aren't symmetrical and it drives me nuts.

Answer 1

While not being a direct answer to your question, you should check out the following theme repo: https://github.com/wesbos/cobalt2-vscode

The author does change a lot of the elements you're asking for and it appears to be more involved than changing a few lines of CSS.

Answer 2

The problem was that the system-wide settings on Debian (Gnome) were specifying aliases for fonts, as defined in /etc/fonts/conf.d/

The default monospace font chosen is indeed the most disgusting monospace font out there - Liberation Mono. I identified it by using the new Firefox on a site that had code in it, and seeing the exact same ugly font as in Visual Studio, and Firefox development tools allow font inspection.

Thanks to the discussions in this thread I managed to find the location of the font aliases, and remove any traces of Liberation Mono , replacing it with any open source font you might prefer (like Input Mono, Fira Code, Hack, Source Code Pro, etc.)

I found all the config files that I needed to edit using this command:

grep "Liberation Mono" /etc/fonts/conf.d/*

Then manually replaced (could've done it using sed I guess) every occurrence I could find. In my case it was only the following 2 files:

/etc/fonts/conf.d/30-metric-aliases.conf
/etc/fonts/conf.d/45-latin.conf

Optionally, I cleared the cache fc-cache -f , and tested the solution

> fc-match "Courier New"                             
Hack-Regular.ttf: "Hack" "Regular"

> fc-match "monospace" 
Hack-Regular.ttf: "Hack" "Regular"

Yay! Refreshing the Firefox page immediately had the desired effect. Completely closing Visual Studio Code and re-opening it had the desired effect.

But is this a solution to the question?
Unfortunately no. This is a system-wide change. Although I couldn't be more pleased with the change (Liberation Mono is objectively ugly, with those asymmetrical parentheses), relying on a global change isn't what I had originally asked.
I won't accept this as an answer, but it might help you, dear reader, if you are going through the same suffering as I did with Liberation Mono.

Answer 3

Launch vscode with parameter:

> [code or vscode] --disable-gpu

GPU hardware acceleration is the default, but sometimes it causes ugly fonts - it causes noises or skews.