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?

Answer 1

For me, the main problem has always been the UI fonts, such as the text on the header tab, command center, toolbar, non-code editor tabs, and also the content on the Activity Bar (any tab, except mono texts).

A useful solution for me is to use Apc Customize UI++ extension. I can easily modify the UI fonts I mentioned, just through settings.json. Check out the GitHub repository page for details on what customizations can be done: Apc Customize UI++ GitHub Repo.

Based on the guide on that page, this is what my VSCode looks like before adding the line to change the UI font through settings.json.

Adding "apc.font.family" : "SF Pro Display" to settings.json, will change the appearance to look like this. You may need to Reload Window a few times for the changes to apply to all areas.

I would recommend not using SF Pro or SF Pro Display, as they don't look that great (and SF shouldn't be used for anything other than Apple apps, I just like to experiment with Apple Fonts on Windows). I probably prefer Inter over the other fonts, as it's sharper on Windows and looks more like a JetBrains IDE.

What’s more, this extension can be used to do other things besides modifying the font. The author of the extension has an example of it on his GitHub repo. I highly recommend you check it out there.

Answer 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 officially unsupported.

ETA:As of 5-1-24. this is still the direct route to changing the font-family. I've been applying this manually after every update since, and it still works, unlike some random plugins mentioned in this thread. For windows, the path to the CSS file is \AppData\Local\Programs\Microsoft VS Code\resources\app\out\vs\workbench\workbench.desktop.main.css, and the CSS selector is .windows , .mac, or .linux, just add your font choice in the first position of the corresponding font-family property for your OS(that way you have a fallback to stock settings). It still gives the error notice about the install being corrupt, however if you make the single CSS change yourself without an unvetted 3rd party plugin, you can be reasonably sure it's the single CSS change you made triggering the notice, and not some random plugin doing further modifications.

Answer 3

The current best solution for changing the UI font is to use the "Fonted" extension in VSCode.

https://marketplace.visualstudio.com/items?itemName=degreat.fonted

Follow the instructions, and you should be good to go

Answer 4

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.

⚠️ EDIT 02/01/2023: following the version 1.74, the Customize UI plugin no longer work, see here. There is currently no ways to change the font in VSCode.

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

Answer 5

In most of the Linux distributions we get the option to change the fonts systemwide if you are okay with changing the system font.