Skip to content

VS Code – How to Use Custom Font

VS Code How to Use Custom Font

A custom font can make your coding experience more comfortable and even improve readability.

In this quick guide, I’ll show you how to install and set up a custom font in VS Code.

Default VS Code font vs JetBrains Mono font

Let’s dive in! 🤿

Contents hide
1. Download and Install a Custom Font
2. Set the Custom Font in VS Code
2.1. Comments

📹 Since we’re talking about visual things, I recommend watching this video as well

Download and Install a Custom Font

First, download the font you want to use. You can find many great options at Google Fonts, but for this tutorial, I’ll be using the JetBrains Mono — a font designed specifically for developers.

Installing the Font (by Operating System)

📌 Windows
– Unzip the archive.
– Select all font files, right-click, and choose Install.

📌 macOS
– Unzip the archive.
– Select all font files and double-click Install Font.

📌 Linux
– Extract the font files to ~/.local/share/fonts (or /usr/share/fonts for system-wide install).
– Run the following command to refresh the font cache:

fc-cache -f -v

💡Good to know

If VS Code was open when you installed the font, restart it to ensure it recognizes the new font.

Set the Custom Font in VS Code

Now, let’s configure VS Code to use the new font!

1️⃣ Open Command Palette:

  • Press CTRL + SHIFT + P (Windows/Linux) or CMD + SHIFT + P (macOS).
  • Search for Preferences: Open User Settings (JSON) and select it.

2️⃣ Add or update the following lines in your settings.json file:

"editor.fontFamily": "'JetBrains Mono'",
"editor.fontLigatures": true,

✅ Make sure the JetBrains Mono text is wrapped in single quotes.

💡Good to know

If your font supports ligatures, then you can use the editor.fontLigatures to enable them.

My personal preference is to use the JetBrains Mono font with a line height of 1.7. If you use other fonts, I recommend playing around with the line height, line spacing, and font size until you find what works best for you.

That’s it! You’ve successfully set up a custom font in VS Code 🎉

Got a favorite programming font? Let me know in the comments!

Happy coding! 💜

Let me know what you think about this article in the comments section below.

If you find this article helpful, please share it with others and subscribe to the blog to support me, and receive a bi-monthly-ish e-mail notification on my latest articles.   
  

Comments