How can I change vscode sidebar font family

Question

How can I change the font family of all texts in a sidebar?

I don't like default font and I found nothing about sidebar font family in the settings.json.

Answer 1

1. One Option

This is apparently currently not natively supprted in VS Code. However, there are extensions. One of them is: Custom CSS and JS Loader, which I found with the help of this answer.

It was not very trivial to find which CSS class to change — the example below comes from this comment — and I'm not sure you will want to change. But, for example, if you wish to change the explorer's font, you can use — install Fira Code first if you want to replicate the example below ipsis litteris —:

.explorer-viewlet { 
  font-family: "Fira Code"; 
  font-weight: bold; 
}

2. Follow The Instructions of the Extension

At any rate, you will also need to follow each of the installation steps very attentively:

1. Install this extension.
2. Add to settings.json:

   "vscode_custom_css.imports": [""],
   "vscode_custom_css.policy": true,
   

   VERY IMPORTANT: Items in vscode_custom_css.imports must be URLs. Plain file paths are NOT URLs. Windows File URL Example: file:///C:/Users/MyUserName/Documents/custom.css. The C:/ part is REQUIRED. MacOS and Linux File URL Example: file:///Users/MyUserName/Documents/custom.css.
3. Restart VS Code with proper permission to modify itself:
4. Windows: Restart with Administrator Permission. MacOS and Linux: See instructions below.
5. Activate command "Reload Custom CSS and JS".
6. Restart.

Answer 2

Just wanted to add to the accepted answer.

The .explorer-viewlet class only targets the explorer view in the sidebar but if you want to target the other views in the sidebar such as Source Control, Extensions, Find etc. You can use a more generic class such as the following snippet below :

.split-view-view > .sidebar > .content > .viewlet{
   font-family: "Victor Mono" !important;
}

Also if you wanna target the header of the viewlet you can use something like this:

.split-view-view>.sidebar> .title > .title-label > h2 {
    font-family: "Victor Mono" !important;
    font-weight: bold;
    font-size: 14px;
    font-style: italic;
 }

Oh and if you wanna know how to find these classnames, you can press F1 (Command) key and type Toggle Developer tools and you can inspect away just like you would do any other website.

You can go super crazy with is (But like the extension says you should be very careful!!).