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

Question

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?

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. — Magnus Lind Oxlund, Dec 17 '18 at 18:49
The default font on Linux is very ugly and much less readable than in Sublime Text, even at a larger size. Plus changing it doesn't even work!! — xjcl, Jul 27 '20 at 08:07
The latest font is Cascadia Mono in case any one comes to this link > mid 2022. Download from https://github.com/microsoft/cascadia-code — Vyas Bharghava, Jul 26 '22 at 12:35

score 296 · Accepted Answer · edited Sep 19 '18 at 14:11

296

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:

Default Settings

edited Sep 19 '18 at 14:11

Edric

24,639
13
81
91

answered Apr 30 '15 at 07:14

John Papa

21,880
4
61
60

2

Do you know the default font settings (family, size, weight) which VSCode uses if nothing is set? – gligoran May 03 '15 at 11:05
2

i believe it is monaco and the size seems to be between 12 and 13 – John Papa May 03 '15 at 14:40
@JohnPapa, do you have a Monaco font in your system? Originally I hadn't had it, but after I installed Monaco font — VSCode started using it. I had to remove this font to make VSCode use its default font. Here's comparison: http://i.imgur.com/RIagrvr.png. – sigod May 10 '15 at 20:43
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](http://i.stack.imgur.com/akbbF.png) – Leo Lozes May 04 '15 at 09:24
How to add other font family like "Source Code Pro" ? – Dale Jul 31 '17 at 08:33
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 – Prokop Hapala Aug 15 '17 at 14:43
To use for example Source Code Pro, do the following: 1. Install the fonts into your operating system (this process varies per OS, in case of doubt, check how to do this on google) 2. Maybe restart Visual Studio Code (I'm not sure if this is necessary even, after the font is available, changes in the settings are picked up immediately on save of the settings file) 3. Open your settings file and add something like this (copy of my settings.json): "editor.fontFamily": "Source Code Pro Light, Consolas, 'Courier New', monospace", "editor.fontWeight": "bold", – Sebastian Aug 21 '17 at 09:52
But I have installed ttf-mscorefonts-installer in Ubuntu, and I have `Courier New` in my `Font Viewer`, but `editor.fontFamily` still doesn't have `Courier New`. – sunjy Jan 03 '18 at 08:06
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. – Braden Brown Jun 15 '18 at 22:52
remember to put the font in between single quotes if the name is made of several words, e.g. `'Source Code Pro Light'`. This will do the trick if nothing happens when changing the font to Source Code Pro. – Mattia Paterna Jun 19 '19 at 06:28
`Preferences` no longer exists, but `Ctrl`+`,` works to access settings – oldboy Jan 21 '20 at 23:13

score 122 · Answer 2 · edited Jul 06 '16 at 06:17

122

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.

edited Jul 06 '16 at 06:17

Draex_

3,011
4
32
50

answered Jun 02 '15 at 19:57

Sebastian

1,413
1
8
15

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 '16 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) – Paul McCarthy Feb 15 '17 at 11:17
7

How to add other font family like "Source Code Pro" ? – Dale Jul 31 '17 at 08:38
VSCode uses different fonts across different OS families. See my answer for the detail. – Andy Li Aug 29 '17 at 05:51
where can we find a complete list of all possible fonts that vscode allow? – Gel Jun 14 '21 at 12:09
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 '22 at 21:55

score 42 · Answer 3 · answered Aug 29 '17 at 05:49

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

score 23 · Answer 4 · edited Dec 03 '16 at 11:33

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.

edited Dec 03 '16 at 11:33

retrixe

143
2
7

answered Jun 04 '15 at 20:31

John Galbraith

387
1
4

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 '15 at 15:27
2

This is no longer true. Changing fontSize with fontFamily unset (default fresh install) works fine. – jblaine Feb 17 '16 at 15:09
Verdana worked but Monaco not working in my vs code 1.60 version. – Kamlesh Sep 15 '21 at 11:36

score 16 · Answer 5 · answered Apr 30 '15 at 06:54

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

Axel Rietschin · Answer 6 · 2016-04-13T19:29:36.970

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.

edited Apr 13 '16 at 19:29

answered Apr 13 '16 at 19:17

Axel Rietschin

611
1
7
10

score 10 · Answer 7 · answered Jun 01 '18 at 16:45

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.

sjas · Answer 8 · 2023-03-15T10:33:53.350

7

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.

edited Mar 15 '23 at 10:33

answered Oct 13 '18 at 04:54

sjas

18,644
14
87
92

score 6 · Answer 9 · answered Oct 11 '19 at 16:06

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

score 0 · Answer 10 · answered Jul 07 '19 at 16:52

0

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.

answered Jul 07 '19 at 16:52

Salih ESKİOĞLU

1

score 0 · Answer 11 · answered Aug 18 '20 at 08:56

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.

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

11 Answers11

Linked