[visual-studio-code] 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?

This question is related to visual-studio-code

The answer is


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


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.


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\'';

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.


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

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.


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


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.


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.


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.