Какой шрифт в visual studio

Which font is used in Visual Studio Code Editor and how to change fonts?

I tried Visual Studio Code editor(https://code.visualstudio.com/) which is recently announced at build. I tried it on Windows and Ubuntu. I can see that default font of Visual Studio Code Editor is not consolas which prefer on my code editors.

So which is default font of Visual Studio Code Editor in All the environments(Ubuntu, MAC OS and windows)? And how can I change it?

11 Answers 11

Go to Preferences > User Settings . (Alternatively, Ctrl + , / Cmd + , on macOS)

Then you can type inside the JSON object any settings you want to override. User settings are per user. You can also configure workspace settings, which are for the project that you are currently working on.

Here’s an example:

In the default settings, VS Code uses the following fonts (14 pt) in descending order:

• Monaco
• Menlo
• Consolas
• «Droid Sans Mono»
• «Inconsolata»
• «Courier New»
• monospace (fallback)

How to verify: VS Code runs in a browser. In the first version, you could hit F12 to open the Developer Tools. Inspecting the DOM, you can find a containing several s that make up that line of code. Inspecting one of those spans, you can see that font-family is just the list above.

The default fonts are different across Windows, Mac, and Linux. As of VSCode 1.15.1, the default font settings can be found in the source code:

Name already in use

visualstudio-docs / docs / extensibility / ux-guidelines / fonts-and-formatting-for-visual-studio.md

• Go to file T
• Go to line L
• Copy path
• Copy permalink

• Open with Desktop
• View raw
• Copy raw contents Copy raw contents

Copy raw contents

Copy raw contents

Fonts and Formatting for Visual Studio

The environment font

All fonts within Visual Studio must be exposed to the user for customization. This is primarily done through the Fonts and Colors page in the Tools > Options dialog. The three main categories of font settings are:

Environment font — the primary font for the IDE (integrated development environment), used for all interface elements, including dialogs, menus, tool windows, and document windows. By default, the environment font is tied to a system font that appears as 9 pt Segoe UI in current versions of Windows. Using one font for all interface elements helps ensure a consistent font appearance throughout the IDE.

Text editor — elements that surface in code and other text-based editors can be customized in the Text Editor page in Tools > Options.

Specific collections — designer windows that offer user customization of their interface elements may expose fonts specific to their design surface in their own settings page in Tools > Options.

Editor font customization and resizing

Users often will enlarge or zoom the size and/or color of text in the editor according to their preference, independent of the general user interface. Because the environment font is used on elements that might appear within or as part of an editor/designer, it is important to note the expected behavior when one of these font classifications is changed.

When creating UI elements that appear in the editor but are not part of the content, it is important to use the environment font and not the text font so that elements resize in a predictable way.

For code text in the editor, resize with the code text font setting and respond to the editor text’s zoom level.

All other elements of the interface should be tied to the environment font setting and respond to any global changes in the environment. This includes (but is not limited to):

Text in context menus

Text in an editor adornment, like light bulb menu text, quick find editor pane, and navigate to pane

Label text in dialog boxes, like Find in Files or Refactor

Accessing the environment font

In Native or WinForms code, the environment font can be accessed by calling the method IUIHostLocale::GetDialogFont after querying the interface from the SID_SUIHostLocale service.

For Windows Presentation Foundation (WPF), derive your dialog window class from the shell’s DialogWindow class instead of WPF’s Window class.

In XAML, the code looks like this:

(Replace Microsoft.VisualStudio.Shell.11.0 with the current version of the MPF dll.)

To display the dialog, call » ShowModal() » on the class over ShowDialog() . ShowModal() sets the correct modal state in the shell, ensures the dialog is centered in the parent window, and so on.

The code is as follows:

ShowModal returns a bool? (nullable Boolean) with the DialogResult , which can be used if needed. The return value is true if the dialog was closed with OK.

If you need to display some WPF UI that is not a dialog and is hosted in its own HwndSource , such as a popup window or a WPF child window of a Win32/WinForms parent window, you will need to set the FontFamily and FontSize on the root element of the WPF element. (The shell sets the properties on the main window, but they will not be inherited past a HWND ). The shell provides resources to which the properties can be bound, like this:

Formatting (scaling/bolding) reference

Some dialogs require particular text to be bold or a size other than the environment font. Previously, fonts larger than the environment font were coded as » environment font +2 » or similar. Using the provided code snippets will support high-DPI monitors and ensure that display text always appears at the correct size and weight (like Light or Semilight).

[!NOTE] Before you apply formatting, ensure you are following the guidance found in Text style.**

To scale the environment font, set the style of the TextBlock or Label as indicated. Each of these code snippets, properly used, will generate the correct font, including the appropriate size and weight variations.

Where » vsui » is a reference to the namespace Microsoft.VisualStudio.Shell :

375% Environment font + Light

Appears as: 34 pt Segoe UI Light

Use for: (rare) unique branded UI

Procedural code: Where textBlock is a previously defined TextBlock and label is a previously defined Label:

XAML: Set the style of the TextBlock or Label as shown.

310% Environment font + Light

Appears as: 28 pt Segoe UI Light Use for: large signature dialog titles, main heading in reports

Procedural code: Where textBlock is a previously defined TextBlock and label is a previously defined Label:

XAML: Set the style of the TextBlock or Label as shown.

200% Environment font + Semilight

Appears as: 18 pt Segoe UI Semilight Use for: subheadings, titles in small and medium dialogs

Procedural code: Where textBlock is a previously defined TextBlock and label is a previously defined Label:

XAML: Set the style of the TextBlock or Label as shown:

155% Environment font

Appears as: 14 pt Segoe UI Use for: section headings in document well UI or reports

Procedural code: Where textBlock is a previously defined TextBlock and label is a previously defined Label:

XAML: Set the style of the TextBlock or Label as shown:

133% Environment font

Appears as: 12 pt Segoe UI Use for: smaller subheadings in signature dialogs and document well UI

Procedural code: Where textBlock is a previously defined TextBlock and label is a previously defined Label:

XAML: Set the style of the TextBlock or Label as shown:

122% Environment font

Appears as: 11 pt Segoe UI Use for: section headings in signature dialogs, top nodes in tree view, vertical tab navigation

Procedural code: Where textBlock is a previously defined TextBlock and label is a previously defined Label:

XAML: Set the style of the TextBlock or Label as shown:

Environment font + bold

Appears as: bolded 9 pt Segoe UI Use for: labels and subheads in signature dialogs, reports, and document well UI

Procedural code: Where textBlock is a previously defined TextBlock and label is a previously defined Label:

XAML: Set the style of the TextBlock or Label as shown:

In some instances, localizers will need to modify font styles for different locales, such as removing bolding from text for East Asian languages. To make the localization of font styles possible, those styles must be within the .resx file. The best way to accomplish this and still edit font styles in the Visual Studio form designer is to explicitly set the font styles at design time. Although this creates a full font object and might seem to break the inheritance of parent fonts, only the FontStyle property is used to set the font.

The solution is to hook the dialog form’s FontChanged event. In the FontChanged event, walk all controls and check if their font is set. If it is set, change it to a new font based on the form’s font and the control’s previous font style. An example of this in code is:

Using this code guarantees that when the form’s font is updated, the fonts of controls will update as well. This method should also be called from the form’s constructor, because the dialog might fail to get an instance of IUIService and the FontChanged event will never fire. Hooking FontChanged will allow dialogs to dynamically pick up the new font even if the dialog is already open.

Testing the environment font

To ensure that your UI is using the environment font and respects the size settings, open Tools > Options > Environment > Fonts and Colors and select «Environment Font» under the «Show settings for:» drop-down menu.

Fonts and Colors settings in the Tools > Options dialog

Set the font to something very different than the default. To make it obvious which UI does not update, choose a font with serifs (like «Times New Roman») and set a very large size. Then test your UI to ensure it respects the environment. Here is an example using the license dialog:

Example of UI text that does not respect the environment font

In this case, «User Information» and «Product Information» are not respecting the font. In some cases this might be an explicit design choice, but it can be a bug if the explicit font is not specified as a part of the redline specifications.

To reset the font, click «Use Defaults» under Tools > Options > Environment > Fonts and Colors.

Text style refers to font size, weight, and casing. For implementation guidance, see The environment font.

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 ��

Best Font for Visual Studio

Looking for the best font for programming? Checkout the top three here.

Unlike the default user, most programmers do care about the font they are using, so do I. The most used IDEs in my case are the brothers, Visual Studio, and the Visual Studio Code. In both, I use the same font which is Cascadia Code.

After reading this article, I switched to Cascadia Code .

The Cascadia Code font is an open-source font developed to improve the readability of program text in plain-text editors such as in the Windows Terminal, Microsoft Visual Studio, and Visual Studio Code.

Try JetBrains Mono in your IDE. Its simple forms and attention to every detail make coding a nice experience for developers’ eyes, no matter which IDE you choose. Check out the official website. The website itself is MARVELLOUS.

VS Code Settings

Monospaced font with programming ligatures.

All the instructions to install the font and configuring it in the IDE’s including Visual Studio and Visual Studio Code is documented in the wiki.

Fantasque Sans Mono

Fantasque Sans Mono is my choice for the past two years. You need to try it to see how good it is.

A programming font, designed with functionality in mind, and with some wibbly-wobbly handwriting-like fuzziness that makes it unassumingly cool.

How to install the new font (windows)

• Download the font from here
• In the ttf folder, double-click each font file, click “Install font”; to install all at once, select all files, right-click, and choose “Install”.
• Open Visual Studio settings. Tools > Options > Environment > Fonts and Colors > Choose Fantasque Sans Mono from the font list > OK.

Let me know which one is your favorite in the comments below ��

This page is open source. Noticed a typo? Or something unclear?
Improve this page on GitHub