DEV Community 👩‍đŸ’ģ👨‍đŸ’ģ

Cover image for Let's change VS Code UI font!
Kunal Tanwar
Kunal Tanwar

Posted on • Updated on

Let's change VS Code UI font!

I'm not too fond of Windows OS default font i.e. Segoe UI and in VS Code it looks super hideous. See the image below

VS Code Screenshot

Today I will teach you how you can switch VS Code UI Font.

Select any Font you like and install all its weight because I am not quite sure which one VS Code uses in their UI. I have configured Inter for myself.

After that try to locate workbench.desktop.main.css you can find this file inside wherever you installed your Microsoft VS Code. In my machine I found it inside C:\Users\Kunal Tanwar\AppData\Local\Programs\Microsoft VS Code\resources\app\out\vs\workbench.

Now open workbench.desktop.main.css and make sure your code formatter is disabled if you are editing in VS Code.

Search for (*you will not find it formatted like this.)

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

Modify the above piece of code with your custom font. I also added two extra properties; they are totally optional.

.windows {
  font-family: Inter, Segoe WPC, Segoe UI, sans-serif;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
Enter fullscreen mode Exit fullscreen mode

Save your file! Restart VS Code! See the changes!

VS Code - A New Look

VS Code Screenshot with Custom Font

VS Code 2nd Screenshot with Custom Font

Now, every time you open your Code Editor you will get a warning and as you can see in the title [Unsupported].

Note - in recent update i.e. 1.70.0 VS Code removed [Unsupported] from the title bar.

Warning Screenshot

Disable this warning by clicking on the little cog icon and selecting Don't Show Again

Warning Screenshot


WAIT THERE'S MORE

The above method does not apply on Context Menu, Search Bar and Markdown previews (iframes mainly) because styling for those elements are generated by JavaScript and configuring those is quite complicated. Follow along hackers 😂

For this we need to customize workbench.desktop.main.js you can find this file in the same location.

Context Menu

Search for :host-context(.windows)

Piece of Code

Context Menu

Search Bar

Search for DEFAULT_FONT_FAMILY

Piece of Code

For Markdown you need to customize a third file 😅 I know it is a lot but what can we do. VS Code still not implementing this option. So, we need to find a way.

MARKDOWN PREVIEW

We need to customize markdown.css and this file is located inside C:\Users\Kunal Tanwar\AppData\Local\Programs\Microsoft VS Code\resources\app\extensions\markdown-language-features\media

Replace the default code with this updated one.

html, body {
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe WPC", "Segoe UI", system-ui, "Ubuntu", "Droid Sans", sans-serif;
}
Enter fullscreen mode Exit fullscreen mode

Markdown Preview

BAD THING - You need to repeat the entire process again after each update. (which is a lot)

GOOD NEWS - I am making an extension to achieve the same without customizing different files.

GOODBYE

Top comments (1)

Collapse
pookybeer profile image
PookyBeer

Thank you! This is awesome!

🌚 Browsing with dark mode makes you a better developer.

It's a scientific fact.