Improve Your Visual Studio Code's Look with Custom Fonts
Tags: vscode
Published: 2022-06-15 19:42:00

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:

![VS Code Screenshot](https://imgur.com/NrYtvLc.png)

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](https://rsms.me/inter/).

Here's how to do it:

1. 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`.

2. Open the `workbench.desktop.main.css` file, ensuring that your code formatter is disabled if you're editing in VS Code.

3. Look for this piece of code:
```css
.windows {
    font-family: Segoe WPC, Segoe UI, sans-serif;
}
```

4. Modify it with your custom font. You can also add a couple of optional properties for improved readability:
```css
.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;
}
```

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

Your VS Code will now have a fresh new look:

![VS Code Screenshot with Custom Font](https://imgur.com/9IYZ6Jo.png)

![VS Code 2nd Screenshot with Custom Font](https://imgur.com/AKBVCYr.png)

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

![Warning Screenshot](https://imgur.com/xu4epGI.png)

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

![Warning Screenshot](https://imgur.com/jIT7FIm.png)

![Wait There's More](https://res.cloudinary.com/practicaldev/image/fetch/s--LbzOPMEK--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_800/https://imgur.com/jDHwLZr.gif)

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)`

![Piece of Code](https://imgur.com/297a8rZ.png)

![Context Menu](https://imgur.com/ZwrPRcN.png)

**Search Bar:**

Search for `DEFAULT_FONT_FAMILY`

![Piece of Code](https://imgur.com/XWmn9kT.png)

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:

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

![Markdown Preview](https://imgur.com/vNM9URt.png)

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:

![GOODBYE](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bcwdll1mz8cpvs9s31in.gif)