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;
}
Modified CSS
.windows {
font-family: 'Inter' !important;
/* below properties can opt out */
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
}
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
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)
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.