Как поменять шрифт в visual studio code

Getting the Most Out of Visual Studio Code

Over the past four years, I have been using Visual Studio Code (also known as VScode) as my primary text editor for coding.

The reason that Visual Studio Code appealed to me was it combined the strengths of both Sublime Text and IntelliJ IDEA which I had used previously. It was as lightweight as Sublime Text with the debugging capability of IntelliJ.

Over these past four years, I have spent a lot of time tweaking my setup for Visual Studio Code so I thought I would share what I have learnt in this post.

VS Code – How to Change Font

It’s easy for a developer to underestimate the importance of their work environment. No, we aren’t talking about your chair, desk, and wall color. We’re talking about your virtual work environment.

Making your Visual Studio code editor feel like home is immensely important for your work efficiency. The font covers a large chunk of the overall VS feel. In this article, we’ll teach you how to edit fonts in various parts of the VS Code editor.

How to Change Font in VS Code

Even if you are a developer who has been working with VS for a long time now, you still might not know about its font changing options.

If you don’t care about why choosing your own font is important, jump straight to the tutorial a few paragraphs below. Bear in mind, though, that the reasons for changing your font (outlined below) can help your decision.

Why are fonts so important in VS? Well, if the aesthetics aspect isn’t enough for you (and trust us, after hours and hours spent in a code editor, it starts to matter), it’s actually also about functionality. So, what makes a font “appropriate” for VS?

Primarily, you’ll want the distinction between similar characters to be notable. For instance, easily distinguishing the number 1 and the lowercase L can significantly speed up your coding and save you time.

Then, there’s the fact that some developers like to use ligatures. Ligatures are a few symbols joined together. These are also called “glyphs,” and they can mean a whole lot when coding.

Without further ado, here’s how to change the font family in VS:

1. Open your VS editor.
   
2. Navigate to the upper part of the screen and select File.
   
3. Now, in the drop-down menu, go to Preferences >Settings.
   
4. You’ll now see the Commonly Used section with a menu on the right-side of the screen, you can access the font from this page or by following the step below.
   
5. Or click on Text Editor > Font and look for the default entry “editor.fontFamily”: “Consolas”.
   
6. Then, instead of “Consolas,” input the name of your preferred font.
   

This should automatically change the font family.

How to Change Font Size in VS Code

Even if you have perfect eyesight, you’ll want to keep your eyes as comfortable as possible when writing lines of code. Just like the discrepancy between similar characters is important when choosing a font family, the font size is important for making coding easier on the eye and helping you work more efficiently.

There isn’t a magical formula for the best font size for coding. Ideally, you’ll want to see the characters as clearly as possible, but you’ll also want the line to fit the VS window. So, try different font sizes and find the perfect one that fits your coding needs.

Here’s how to change the font size in VS Code:

1. Navigate to the User Settings menu (step number 3 in the font tutorial).
   
2. Look for the “editor.fontSize”: 15 line, your font size might be set to something different.
   
3. Then, instead of 15, enter your preferred font size.
   

How to Change Font of Explorer in VS Code

The Explorer feature in VS Code works just like the explorer feature in most other apps. It is used to manage, browse, and open files and folders to work on your project. Since VS Code is based on folders and files, the Explorer makes it easy for you to get started – just open the file/folder using VS Code. It’s as simple as that.

You can expect to be using the VS Code Explorer a fair bit. If the Explorer’s font size doesn’t suit you, you’ll be happy to know that you can change it.

1. Go to the User Settings menu again.
   
2. Find the “editor.fontSize”: 14 entry, your font size may differ.
   
3. Change this to a font size of your choice, 18 is used in this example.
   

How to Change Terminal Font in VS Code

Instead of switching windows or making changes to the existing terminal’s state, VS Code allows you to use an integrated terminal, which is found at your project’s/workspace’s root. Of course, you might want to make changes to the font here for ease of use. Here’s how to go about changing the VS Code terminal font:

1. Navigate to the root folder of your project/workspace.
2. Open the settings.json file using VS Code. Alternatively, in VS Code, press Ctrl + Shift + P (instead of Ctrl, use Command for Mac devices) and find the settings.json file.
3. Change the corresponding three lines to this:
   “terminal.external.osxExec”: “iTerm.app”,
   “terminal.integrated.shell.osx”: “/bin/zsh”,
   “terminal.integrated.fontFamily”: “D2Coding”,
   Note that D2Coding is an example. You can also choose any other font you prefer.
4. Save the settings when finished.

To change the terminal font size, navigate to the “terminal.integrated.fontSize”: entry and set it to that of your own preference.

How to Change Font for Comments in VS Code

Code comment entries are, by default, in the same font as the rest of the code. Changing this makes them stand out, which can often prevent hours of wasted work (it’s easy to miss a comment when it’s in the same font as everything else in VS). As simple as this kind of thing may seem, the solution is a bit more complex than you’d expect. Also, the results might not be ideal, as this might cause some alignment issues. Still, it doesn’t hurt to try:

1. Go to the root installation folder for VS Code on your device.
2. Navigate to the touch style.css entry in the terminal. This will create a stylesheet.
3. Now, it’s time to add the font rule. Here’s an example of a style:
   .mtk3 <

font-family: «iosevka»;

font-size: 1em;

font-style: italic;

How to Change Sidebar Font Size in VS Code

There is no setting in VS Code that enables the user to change the terminal’s font size. However, a workaround exists, and it involves the mentioned Custom CSS and JS Loader plugin.

1. In the plugin, navigate to the extension details and follow the tutorial section carefully.
2. Use the following logic:
   «vscode_custom_css.imports»: [«[insert custom file URL]»]
3. Do this for each custom file.

The result should make for a much better and aesthetically pleasing VS Code sidebar.

How to Change Font Using Different Operating Systems

If you’re coding in VS, you’re either using a Windows computer, a Mac, or a Linux system. Although these three aren’t identical in terms of VS, the differences mostly boil down to the Ctrl/Cmd key option and the default locations of the VS Code files. So, the principle of font changing in VS Code remains pretty much the same across all devices.

Additional FAQ

Why can’t I change the font in VS Code?

There are many mistakes you can make in VS Code, and changing the font is not as straightforward as doing so in MS Word. As you’ll be using a lot of coding to change the actual VS Code font, you should know about the most common oversight people make. Make sure that each entry is surrounded by quotation marks. For example, “vscode_custom_css.imports”: [“file:///Users/username/.vscode/style.css”], won’t work unless you use the quotation marks. Additionally, make sure that you use spaces between the commands.

Which font is used for code in VS Code?

By default, the font used for coding in VS Code is Consolas. If you follow this guide, you can change most fonts in VS Code, whether we’re talking about the code itself, the terminal, the comments, or the explorer feature.

However, if you’re talking about the font found on the VS Code’s official website images, no one can tell you which one was used. Unless VS Code developers explicitly reveal which font was used, there is no way of finding out.

How do I hack a VS Code font?

Originally, to hack meant to modify, but, if by this you mean adding the Hack font to VS, you can add it via the Hack’s website. Download the TrueType font from Hack. Extract the downloaded zip file. Install the extracted files. Then, go to Tools, followed by Options. In the Options menu, select Environment, and then navigate to Fonts and Colors. Open the Font dropdown menu and select the Hack entry.

What font do hackers use?

As a rule of thumb, every coder, including hackers, uses a font they like. A good example of a popular font that’s allegedly a “hacker’s choice” would be Ray Bluetens, also known as Lawn Dart Fonts.

Changing Font Options in VS Code

Dealing with font options in VS Code is definitely not as straightforward as changing fonts in a text editor program. However, considering we’re talking about coding software here, VS offers a wide variety of options compared to its competition. Follow the instructions in this article and make your coding experience as personalized, user-friendly, and smooth as possible.

Did you manage to edit your font settings in VS Code? Did you run into any problems? Scroll down and check out our comments section below. It’s teeming with good advice. Don’t refrain from asking a question of your own or starting a discussion either. Our community is more than happy to help.

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:

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:

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:

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

Note: if you have existing configurations in your user settings.json file, don’t delete them. Just add a comma , and skip to a new line, and then paste it there. Look at the defaultSettings.json file as a reference. It has tons of configurations.

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:

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:

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.

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:

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.

Has this been helpful to you?

You can support my work by sharing this article with others, or perhaps buy me a cup of coffee ��

How to use custom font in visual studio code

This isn’t so much a coding question as it is about the visual studio code editor. What I want to do is use source code pro in the editor, but I don’t know what to change the font setting to. Thanks!

5 Answers 5

First install the font on your machine if necessary. Then, in your user settings JSON file (File > Preferences > User Settings), override editor.fontFamily like so:

You may need to restart VSCode if it was already open when the font was first installed.

As a follow up to Nacimota’s answer, to install custom fonts (using Windows 10 the following example) go through the tutorial here.

For me it was a matter of searching for «fonts» from my task bar then clicking the top result. From there I dragged all the files in the «target/TTF» directory, that is generated from following the Source Code Pro tutorial.