Improve Your Visual Studio Code's Look with Custom Fonts

#vscode

Are you tired of the default Windows OS font, Segoe UI, making your Visual Studio Code look not-so-great? Take a look at the transformation below:

Today, I'm going to show you a simple way to switch up your VS Code's user interface (UI) font. You can select any font you like and install all its weights, as we're not entirely sure which one VS Code uses. I've personally gone with Inter.

Here's how to do it:

First, locate the workbench.desktop.main.css file. You can usually find it in your Microsoft VS Code installation directory. On my machine, it's here:
C:\Users\<Your User Name>\AppData\Local\Programs\Microsoft VS Code\resources\app\out\vs\workbench.
Open the workbench.desktop.main.css file, ensuring that your code formatter is disabled if you're editing in VS Code.
Look for this piece of code:

.windows {
    font-family: Segoe WPC, Segoe UI, sans-serif;
}

Modify it with your custom font. You can also add a couple of optional properties for improved readability:

.windows {
    font-family: Inter, Segoe WPC, Segoe UI, sans-serif;
    /* works only in Windows and Linux */
    text-rendering: optimizeLegibility;
    /* works only in Mac OS */
    -webkit-font-smoothing: antialiased;
}

Save your file, restart VS Code, and witness the changes!

Your VS Code will now have a fresh new look:

But here's a small caveat: you'll see a [Unsupported] warning every time you open your code editor:

You can disable this warning by clicking on the little cog icon and selecting Don't Show Again:

Unfortunately, the above method won't work for the Context Menu, Search Bar, and Markdown previews (mainly iframes) because their styling is generated by JavaScript, and configuring those can be quite complicated.

For these elements, you'll need to customize the workbench.desktop.main.js file, which you can find in the same location.

Context Menu:

Search for :host-context(.windows)

Search Bar:

Search for DEFAULT_FONT_FAMILY

For Markdown, you'll need to customize a third file. Yes, it's a bit of work, but it's worth it!

Markdown Preview:

The file to modify is markdown.css, located inside: C:\Users\<Your User Name>\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;
}

Now, for the not-so-great news - you'll need to repeat this process after each VS Code update (which can be frequent). I had plans to create an extension to simplify this process, though I couldn't due to college commitments.

And with that, it's time to bid you goodbye: