How to Enable Font Ligatures in Visual Studio Code

Ligatures are special characters in a font that combine two or more characters into one.

For example, if you use a ligatured font, whenever you type != it will become ≠.

Aside from the arguments whether using a ligatured font is good or bad thing in your code, here’s what you need to do when you want to enable it in Visual Studio Code.

For this example, we’ll use Cascadia Code (NOT Cascade as shown in the screenshots) and Fira Code. If you want to follow along, you can download the fonts by using the download link below.

On macOS, instead of downloading and installing the fonts manually, you can use Homebrew instead, which is way easier and quicker.

1. Launch Visual Studio Code.
2. Press CTRL+, (or Cmd ⌘+, on macOS) to open Settings.

3. Under Settings, you can see and edit what font you want to use. The way it’s setup now, Cascadia Code is prioritized and Fira Code is used only if Cascadia Code is not available.

   

4. To enable the ligatures though, we need to edit the settings.json file. We can type in the word “ligatures” in the Search settings box. Then click on the link Edit in settings.json to open the json file.

   

5. You can add editor.fontLigatures and set it to true under the editor.fontFamily.

   

   {
     "editor.fontFamily": "'Cascadia Code', 'Fira Code'",
     "editor.fontLigatures": true,
   [deleted for brevity]
   }
   

6. Close the settings.json tab and you should be able to see the ligatures.

Now, we can test if we can see the font ligatures work.

If you did not see any change, make sure you restart Visual Studio Code before trying it again.

Download

Fira Code: free monospaced font with programming ligatures
Microsoft Cascadia Code Font

Further Reading

Ligatures in Programming Fonts are a Terrible Idea
How to Install Fonts on macOS using Homebrew