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

Visual Studio-Code

Visual Studio-Code Problem Overview


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?

Visual Studio-Code Solutions


Solution 1 - Visual Studio-Code

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:

// Controls the font family.
"editor.fontFamily": "Consolas",

// Controls the font size.
"editor.fontSize": 13

Useful links:

Solution 2 - Visual Studio-Code

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.

relevant areas

Solution 3 - Visual Studio-Code

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:

const DEFAULT_WINDOWS_FONT_FAMILY = 'Consolas, \'Courier New\', monospace';
const DEFAULT_MAC_FONT_FAMILY = 'Menlo, Monaco, \'Courier New\', monospace';
const DEFAULT_LINUX_FONT_FAMILY = '\'Droid Sans Mono\', \'Courier New\', monospace, \'Droid Sans Fallback\'';

Solution 4 - Visual Studio-Code

In VSCode if "editor.fontFamily": "" is blank, the font size will NOT work. Set a font family to change the size.

"editor.fontFamily": "Verdana", or "editor.fontFamily": "Monaco",

Really, use whatever font family you like.

Then "editor.fontSize": 16, should work.

Solution 5 - Visual Studio-Code

On my windows 8.1 machine default VS Code font is Consolas, but you can easily change the font in File->Preferences->User Preferences. setting.json file will be opened alongside with default settings file, from where you can take syntax and names for settings properties and set your own ones in settings.json.enter image description here

Solution 6 - Visual Studio-Code

On Windows, the default settings are as follow (I never installed Monaco nor Menlo)

{
    "editor.fontFamily": "Consolas",
    "editor.fontSize": 14,
    "editor.lineHeight": 19
}

Settings fontSize to 12 and lineHeight to 16 closely approximate Visual Studio set to Consolas with 10pt size. I could not get an exact match (VS Code font is slightly bolder) but close enough.

Solution 7 - Visual Studio-Code

Another way to determine the default font is to start typing "editor.fontFamily" in settings and see what auto-fill suggests. On a Mac, it shows by default:

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

which confirms what Andy Li says above.

Solution 8 - Visual Studio-Code

Since the VisualStudio has been updated now (2019). You can try on this method:

  • Go to File->Preference->Settings.
  • Go to Workspace tab and then Text Editor->Font
  • Under Font-Family form, put the font-family names you want to use separated by a comma For e.g I have put these fonts in my Workspace: Click to see my Workspace setting

Solution 9 - Visual Studio-Code

Open vscode.

Press ctrl,.

The setting is "editor.fontFamily".

On Linux to get a list of fonts (and their names which you have to use) run this in another shell:

fc-list | awk '{$1=""}1' | cut -d: -f1 | sort| uniq

You can specify a list of fonts, to have fallback values in case a font is missing.

Solution 10 - Visual Studio-Code

Go to Tools->Options on menu on main window. Under Environment container, you can see Fonts and Colors. You can select font and color which you want.

Solution 11 - Visual Studio-Code

For windows please follow these steps Goto - > File -> preferences -> settings
OR press CTRL + , (for windows only) you'll see settings page there find text editor option tab on left side then click on ' Font ' then add any valid font family name there which you want to apply to vscode.

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionJalpesh VadgamaView Question on Stackoverflow
Solution 1 - Visual Studio-CodeJohn PapaView Answer on Stackoverflow
Solution 2 - Visual Studio-CodeSebastianView Answer on Stackoverflow
Solution 3 - Visual Studio-CodeAndy LiView Answer on Stackoverflow
Solution 4 - Visual Studio-CodeJohn GalbraithView Answer on Stackoverflow
Solution 5 - Visual Studio-CodeNikita KunevichView Answer on Stackoverflow
Solution 6 - Visual Studio-CodeAxel RietschinView Answer on Stackoverflow
Solution 7 - Visual Studio-CodeshackerView Answer on Stackoverflow
Solution 8 - Visual Studio-CodeHemant SinghView Answer on Stackoverflow
Solution 9 - Visual Studio-CodesjasView Answer on Stackoverflow
Solution 10 - Visual Studio-CodeSalih ESKİOĞLUView Answer on Stackoverflow
Solution 11 - Visual Studio-CodeMitesh vaghelaView Answer on Stackoverflow