How do i setup font ligatures for Visual Studio Code?

Question

I am setting up fonts ligatures for my VSCode using these two lines.

"editor.fontFamily": "'Fira Code'",
"editor.fontLigatures": true,

But it still looks the same as before.

I have tried to disable all of my installed extensions but it didn't work.

Here is my full settings:

{
  "workbench.iconTheme": "material-icon-theme",
  "workbench.colorTheme": "Material Theme Darker High Contrast",
  "editor.formatOnSave": true,
  "explorer.confirmDelete": false,
  "editor.suggestSelection": "first",
  "vsintellicode.modify.editor.suggestSelection": "automaticallyOverrodeDefaultValue",
  "window.zoomLevel": 0,
  "editor.fontSize": 16, //!=
  "editor.fontFamily": "'Fira Code'",
  "editor.fontLigatures": true,
  "explorer.confirmDragAndDrop": false
}

I want fully functional font ligatures as on this page: How i want it to look. Instead I am getting basic text with some font.

Try without the inner quotes: `"Fira Code",` (assuming you installed the font properly). — Mark, May 19 '19 at 16:55
"It doesn't work" is an opinion, not a problem, and certainly not the kind of [detail that others can use to help you figure out what's wrong](/help/how-to-ask), so: what did you expect it to do, and what justifies having that expectation? What did you do to test it, what did you expect _that_ to do, and why, and what did it do instead? — Mike 'Pomax' Kamermans, May 19 '19 at 16:56
@Mark i have tryed your opinion ```"Fira Code",``` but it didnt help. — Kolobozka6b, May 19 '19 at 17:14
@Mike'Pomax'Kamermans Do i have it right now? I am frst time here so i am realy glad for every help. — Kolobozka6b, May 19 '19 at 17:20
Is this after you already tried to follow the instructions onhttps://github.com/tonsky/FiraCode/wiki/VS-Code-Instructions ? — Mike 'Pomax' Kamermans, May 19 '19 at 21:41
@Mike'Pomax'Kamermans yea but it still look like normal font 0 font ligatures — Kolobozka6b, May 20 '19 at 17:24
Okay it works now. I realized all I needed to do is to restart the computer...I am using a macOS. — Aero Wang, Mar 28 '20 at 17:40
install this font first and it will work. https://github.com/microsoft/cascadia-code/releases/download/v2108.26/CascadiaCode-2108.26.zip — , Oct 21 '21 at 04:56

score 69 · Answer 1 · answered Apr 19 '20 at 07:21

69

Step #1: Install Fira Code.

Step #2: Set the font in VSCode settings:

"editor.fontFamily": "Fira Code, Menlo, Monaco, 'Courier New', monospace",
"editor.fontLigatures": true,

Step #3: Restart/reload VSCode.

That's about it.

answered Apr 19 '20 at 07:21

Ahmad Awais

33,440
5
74
56

good one. Not sure why others are not telling that you have to install Fira Code font first. – Pushkraj Jori Jan 22 '23 at 09:08

score 5 · Answer 2 · answered Mar 10 '20 at 22:07

5

It doesn't seem you didn't have the Fira font installed in your PC. Please follow this step if you are using MacOS.

Open terminal and run these commands.

brew tap homebrew/cask-fonts
brew cask install font-fira-code

And try to restart VsCode.

Or if you are on other OS (Windows or Linux) follow this step. https://github.com/tonsky/FiraCode/wiki/Installing

Hopefully, this might be helpful.

answered Mar 10 '20 at 22:07

apollo

175
1
5
16

1

There is no need to use or install brew. Just get the TTF https://github.com/tonsky/FiraCode/blob/master/distr/ttf/FiraCode-Retina.ttf – Ariel M. Jul 31 '20 at 03:41
I too had an issue to first get this working, had to restart by exiting, at least for the font family. FiraCode font is pretty nice and was able to get font ligatures working too (no need to restart for this). Think the issue other might run into , VS Code seems to have a number of places where to specify the font uses. What worked for me was editing my settings file directly: editor.fontFamily": "'fira Code', fall backs..., ... "editor.fontLigatures": true, All good now, hope it helps :) – Dano Jan 27 '22 at 01:39

score 4 · Answer 3 · answered Dec 01 '20 at 09:10

Since VS Code 1.40, editor.fontLigatrues supports string settings, that is useful for fonts that support different stylistic sets:

i.e.:

"editor.fontLigatures": "'ss09', 'zero', 'onum'",
"editor.fontLigatures": "'ss01'",

You can read more about feature tags here (but the support depends on the font in question):

https://learn.microsoft.com/en-us/typography/opentype/spec/featuretags

score 2 · Answer 4 · answered Oct 02 '20 at 06:10

2

I solved my problem put Fira Code without ""

answered Oct 02 '20 at 06:10

Ray

394
3
11

score 2 · Answer 5 · edited Jun 02 '21 at 17:56

2

For those with a different version of VS Code you can try to press key combination of control and comma ( Ctrl+, ) to open your settings tab and then after search for font ligatures

Search Results

After this click on Edit in settings.json.

Then set editor.fontLigatures=true.

Final look

After completing this step then you'll be good to go.

edited Jun 02 '21 at 17:56

Nuwan Alawatta

1,812
21
29

answered Nov 23 '20 at 12:07

Blessing

2,450
15
22

score 1 · Answer 6 · answered Mar 28 '20 at 17:42

1

If you are using a macOS sometimes you will need to restart the computer before the ligatures for Visual Studio Code to take effect.

answered Mar 28 '20 at 17:42

Aero Wang

8,382
14
63
99

score 1 · Answer 7 · answered Feb 09 '23 at 10:43

1

This is still not fixed in VS Code. But looks like it's close. After 2 years the VS Code Terminal will finally support "Cascadia Code" and other fonts with programming ligatures.

answered Feb 09 '23 at 10:43

Junaga

292
4
19

score 0 · Answer 8 · answered Dec 09 '20 at 06:10

0

Install FiraCode font-family for Mac 'Computer' but not 'User'

How to install and remove fonts on your Mac--Apple support

answered Dec 09 '20 at 06:10

kvsur

1

How do i setup font ligatures for Visual Studio Code?

8 Answers8

Linked

Related