295

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?

2
  • 2
    The font used for tab titles, menus, and other text that's part of VS Code itself, as opposed to content such as code within an editor, is currently Arial. Dec 17, 2018 at 18:49
  • The latest font is Cascadia Mono in case any one comes to this link > mid 2022. Download from github.com/microsoft/cascadia-code Jul 26, 2022 at 12:35

12 Answers 12

308

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:

12
  • 2
    Do you know the default font settings (family, size, weight) which VSCode uses if nothing is set?
    – gligoran
    May 3, 2015 at 11:05
  • 2
    i believe it is monaco and the size seems to be between 12 and 13
    – John Papa
    May 3, 2015 at 14:40
  • 1
    It's just to confirm that in Windows 8.1 the font is Monaco, and at least in my 3200x1800 screen, the default font size is 14. Here's the comparison with Monaco 14 in Intellij Idea (Code is the blue one): !Code / Idea
    – Leo Lozes
    May 4, 2015 at 9:24
  • 2
    it does not do anything ... I see still the same font. Should I force update of the settings? E.g. restart vscode ? even after restart no change Aug 15, 2017 at 14:43
  • 3
    Once you save it, if it doesn't change make sure to restart Visual Studio Code. There are two spots you may need to change this. One is File -> Preferences -> Settings. The other is if you have a .vscode folder there will be a settings.json file under it. Jun 15, 2018 at 22:52
127

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

6
  • I got "Segoe WPC","Segoe UI",SFUIText-Light,HelveticaNeue-Light,sans-serif,"Droid Sans Fallback". I am using it in archlinux if it matters.
    – aloisdg
    Jan 31, 2016 at 20:17
  • That explains why it is a bit slow to load. I tried "editor.fontFamily": "Windings", to verify that the font setting does not work. The size part does work. However it appesrs to be smaller that the size on Notepad++ for the same font. (but this may be also caused by it being run in a browser) Feb 15, 2017 at 11:17
  • 7
    How to add other font family like "Source Code Pro" ?
    – Dale
    Jul 31, 2017 at 8:38
  • VSCode uses different fonts across different OS families. See my answer for the detail.
    – Andy Li
    Aug 29, 2017 at 5:51
  • 1
    @Gel, the complete list of all possible fonts that vscode allows should be the complete list of all fonts installed in your operating system, or at least all those that are not an ancient format preceding TTF and OTF. By today, I'd assume 99% or more of all fonts on Windows and macOS is either TTF or OTF.
    – Sebastian
    Mar 29, 2022 at 21:55
47

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

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.

3
  • This is the only time I've seen someone mention that you have to have a nonblank fontFamily for font size to be used. Solved a problem for me.
    – Alex White
    Oct 15, 2015 at 15:27
  • 2
    This is no longer true. Changing fontSize with fontFamily unset (default fresh install) works fine.
    – jblaine
    Feb 17, 2016 at 15:09
  • Verdana worked but Monaco not working in my vs code 1.60 version.
    – Kamlesh
    Sep 15, 2021 at 11:36
16

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

15

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.

12

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.

0
9

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
8

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.

0

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.

0

If it not working on new font but work on existing font you should try to close and reopen your VScode

-1

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.