VSCodeTips

VSCodeTips is a community of 1,187 amazing vscoders

We're a community that shares tips & tricks on how to best leverage VS Code

Create account Log in
Cover image for How to change VS Code UI Font in Windows?
Kunal Tanwar
Kunal Tanwar

Posted on

How to change VS Code UI Font in Windows?

Note - This Post is Originally written on DEV

Personally I don't like Windows default font i.e. "Segoe UI". And also in VS Code it looks super ugly.

So, Today I will show you how you can change VS Code UI Font.

Firstly select what font you need to set. I like Inter the most I use this font almost everywhere.

Make sure to install all weights of that font because I am quite confused between weights VS Code uses.

Then, you need to find workbench.desktop.main.css in windows you can find it

C:\Users\<username>\AppData\Local\Programs\Microsoft VS Code\resources\app\out\vs\workbench

After that open the css file and make sure if you are using any formatter like prettier or something else, disable it because we need to save the minified version not the formatted one.

Search for .windows class only in which the font-family is already set

DEFAULT CSS

.windows {
  font-family: 'Segoe WPC', 'Segoe UI', sans-serif;
}
Enter fullscreen mode Exit fullscreen mode

Modified CSS

.windows {
  font-family: 'Inter' !important;
  /* below properties can opt out */
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
Enter fullscreen mode Exit fullscreen mode

Minified Version
Make sure to minify the above code
.windows{font-family: 'Inter' !important;text-rendering: optimizeLegibility;-webkit-font-smoothing: antialiased;}

Now save the file i.e. workbench.desktop.main.css and restart your VS Code

Final Result

After completing the above mentioned process you will get a warning that your VS Code is corrupted just ignore that warning. To get rid of that warning click on the cog icon which you can find top-right corner of the warning and then click on don't show again.

Important

After each update of VS Code you need to repeat the entire process again.

Discussion (1)

Collapse
nickytonline profile image
Nick Taylor

Thanks for sharing! Have you seen the Custom CSS and JS Loader extension? This should enable you to do what you’re doing without having to update those VS Code files all the time.