How to Change Your Code Font in VSCode

Learn how to change Visual Studio Code’s default code font, as well as some optional information about why or why not to use a different code font than VSCode’s default.

How to change VSCode’s default code font

To change your VSCode’s default code font, you can either use VSCode’s Settings UI or configure it directly in the Settings JSON file (settings.json). I always configure in the JSON file since it gives you 100% control.

To open Settings JSON, first, open the command palette by pressing:

• Cmd + Shift + P on Mac
• Ctrl + Shift P on Windows

Now search for “settings” and select Open Settings (JSON) from the dropdown.

Depending on your existing VSCode configuration, you might have more than one settings.json file. Choose the one inside your User directory. As a reference, my settings.json file is at this path on my Mac:

~/Library/Application Support/Code/User/settings.json

In your user settings.json file, you can overwrite any default VSCode configuration — and it’s a lot simpler than it sounds.

Wait, where do the default VSCode configurations come from?

From the Open Default Settings (JSON) file (defaultSettings.json).

We’ll use this file as a reference, so open it up:

1. Open your command palette (Cmd + Shift + P) and search for “settings”.
2. Select the Open Default Settings (JSON).

Now you have two files open:

1. Your user Settings(JSON): settings.json
2. VSCode’s Open Default Settings (JSON): defaulSettings.json

Any configurations you add to your Settings (JSON) will overwrite the Default Settings (JSON).

Since you want to change VSCode’s code font, search for “editor.fontFamily” inside Open Default Settings (JSON). You should find a line that looks like this:

	// Controls the font family.
	"editor.fontFamily": "Menlo, Monaco, 'Courier New', monospace",

Now, copy this line (you don’t have to copy the commented text) and paste it into your user settings.json file, so it looks similar to this:

{
  "editor.fontFamily": "Menlo, Monaco, 'Courier New', monospace",
}

If you’re in doubt, watch this quick video where I open both the user settings and default settings files:

To change your code font family there are a couple of methods. It depends on what font you want to use.

Use built-in/system font

If the code font you want to use is part of VSCode or is installed on your computer (like a system font), then all you have to do is to add the name of the font at the beginning of your property value:

{
  "editor.fontFamily": "'Your New Font', Menlo, Monaco, 'Courier New', monospace",
}

For testing purposes, let’s say that you want to use the Monaco font instead of Menlo. Simply switch the order of the fonts in the property value:

{
  "editor.fontFamily": "Monaco, Menlo, 'Courier New', monospace",
}

As soon as you save (Cmd + S), you should see the code font change in front of you. Now Monaco is your code font!

Install new/custom font

If the font you want to use is not part of VSCode or is not installed on your computer, you need to install it. As an example, I’ll show you how to install the beautiful open source Fira Code font.

Download Fira Code:

1. Go to the official repository on GitHub.
2. Scroll down to where it says Download & Install, and click to download. It’s a small file.
3. Unpack the rar file.

Install on Mac

Inside your unpacked Fira_Code directory, open the folder called ttf.

1. Select all font files
2. Right-click and select Open (alternatively Open With Font Book)
3. Select "Install Font"

Now Fira Code is installed on your Mac.

Install on Windows

Inside your unpacked Fira_Code directory, open the folder called ttf.

1. Select all files,
2. Right-click and choose Install.

Now to make Fira Code work in VSCode, add Fira Code as a font-family value in your settings.json file:

{
  "editor.fontFamily": "'Fira Code', Menlo, Monaco, 'Courier New', monospace",
}

Save your file, and now your VSCode code font is Fira Code!

Why should you change your code font?

As a developer/coder you spend a big part of your life typing. You might as well do that while using a high-quality font (also known as a typeface) that is easy to read and pleasant for your eyes.

The default font, Menlo, that comes along with VSCode is not bad at all. You might be happy with it, and that’s fine.

However, you don’t know what difference a font has on your workflow until you have something to compare with. Give the Fira Code font you learned about in this tutorial a chance for a couple of days. If you conclude that it’s not your type of font, try another one. You can always go back to Menlo.

You might conclude that Menlo is the perfect font for you, and that’s great! This is not about which font is the best for every person. There is no such thing.

People are different.

What is a good coding font?

Here’s a list of criteria for a good coding font:

• A good coding font is one that is easy to read — for you — as long as you need to every day during your working hours.
• A good coding font has all the required glyphs (characters, symbols) that you need for both your coding and writing (comments, documentation, etc.).
• A good coding font is almost always a monotype. I say almost always because I can’t rule out any exceptions, but I haven’t found one.

As for monotype fonts, which most developers agree are best for coding, there three common types: serif, sans serif, and slab serif.

Which classification that suits you best is a matter of personal preference. That said, people read best what they read most. In other words, if you’re used to reading and typing with a serif font, then you will probably prefer a serif monotype as well.

You don’t have to go out and try every monotype font ever created. Have a look at 4-5, and pick the one you like best.

Besides the Fira Code font you learned about in this tutorial, I also recommend IBM Plex Mono, which is available for free at Google Fonts.