This page looks best with JavaScript enabled

Enable Font Ligatures in VS Code

 ·   ·  ☕ 2 min read

Enabling VS Code Font Ligatures infographic

Font ligatures combine multiple characters into a single unique character. Some fonts provide ligatures specifically for software development.

Some free fonts that support ligatures are:

FontReference
Cascadia Codelink
Fira Codelink
JetBrains Monolink
Iosevkalink
Haskliglink
Monoidlink
Victor Monolink

To enable font ligatures in Visual Studio Code you will need to edit the settings.json file. To do this open the VS Code settings (File -> Preferences -> Settings) select the Text Editor group and Font settings. Replace the name of the font with the font you would like to use. For example if you would like to use Cascadia Code then replace the font with Cascadia Code. You may include fallback fonts that will be used if the first font is not available. Cascadia Code, Fira Code will prioritize Cascadia Code but use Fira Code if Cascadia Code isn’t available on the current machine.

Once you’ve configured the font you’ll need to explicitly enable ligatures. This is a separate option and requires you to modify the settings.json file directly. You will need to add the "editor.fontLigatures" setting to your settings.json settings file. Once this is done your settings should include two lines that look something like this:

1
2
3
4
5
{
  "editor.fontFamily": "*** Your ligature enabled font ***",
  "editor.fontLigatures": true,
  "...": "your other settings",
}

Once you’ve made these changes you should be ready to start taking advantage of ligatures in your code.

Different fonts may support a different set of ligatures.

If you still need help, here is a video walking through the process of configuring ligatures in VS Code.


Sam Wronski
WRITTEN BY
Sam Wronski
Maker of things, currently helping build cloud things @ Google. World of Zero is a personal project disconnected from my professional work. Lets make something awesome together!