How to enable Font Ligatures in Visual Studio Code

# Table of Contents

1. How to enable Font Ligatures in Visual Studio Code
2. Installing a font with ligatures
3. Enabling Font Ligatures in Visual Studio Code
4. Enabling font ligatures in a local .vscode/settings.json file

# How to enable Font Ligatures in Visual Studio Code

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

Here is a screenshot with some examples.

The file from the screenshot has the following contents.

Copied!
=> -> --> >= <= ===

/= ~> >-> <-< <> |>

The font in the example is called Fira Code.

If you have already installed a font with ligatures, click on the following subheading:

• Enabling Font Ligatures in Visual Studio Code

# Installing a font with ligatures

Make sure you have a font with ligatures installed.

The most commonly used font with programming ligatures is Fira Code.

Other free monospaced fonts with ligatures include:

• Cascadia Code
• JetBrains Mono
• Victor Mono
• Iosevka

# Installing Fira Code on Windows

Here are the instructions on how to install Fira Code.

Alternatively, you can follow the OS-specific instructions in the official repository.

On Windows:

1. Install Fira Code using chocolatey:

Copied!
choco install firacode

2. Install Fira Code using scoop.

Make sure to start CMD as an administrator and issue the following command.

Copied!
scoop bucket add nerd-fonts
scoop install firacode

# Installing Fira Code on macOS

On macOS:

1. The easiest way is to use brew and cask.

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

Alternatively, you can:

1. Open the releases page of the GitHub repo.
2. Click on the Fira_Code_vX.Y.zip file to download it.

3. Extract the file.
4. Select all ttf font files.
5. Right-click and select Open (or Open With Font Book).
6. Select Install Font.

# Installing Fira Code on Linux

Follow the instructions in this section of the docs for your flavor of Linux.

For example, on Ubuntu, run the following command.

Copied!
sudo apt install fonts-firacode

# Enabling Font Ligatures in Visual Studio Code

To enable font ligatures in Visual Studio Code:

1. Press Ctrl + Shift + P (or Command + Shift + P on macOS).

2. Type user settings and select Preferences: Open User Settings.

You can also open the settings screen by pressing Ctrl + , on Windows and Linux or Cmd + , on macOS.

3. Type Editor: font family and type 'Fira Code' in the field.

4. If you want to provide a fallback font in case Fira Code is not installed, use a comma, e.g. 'Fira Code', 'Cascadia Code', 'Consolas'.

If Fira Code is not installed on the machine, VS Code falls back to the Cascadia Code font.

If Cascadia Code is not available as well, it falls back to the Consolas font.

5. Type ligatures in the search field and click on Edit in settings.json.

6. Add the following code to your settings.json file.

Copied!
// Font Family
"editor.fontFamily": "'Fira Code', 'Cascadia Code', 'Consolas'",

// Enable Font Ligatures
"editor.fontLigatures": true,

Make sure the properties are wrapped in an object in your settings.json file.

Copied!
{
  // Font Family
  "editor.fontFamily": "'Fira Code', 'Cascadia Code', 'Consolas'",

  // Enable Font Ligatures
  "editor.fontLigatures": true,

  // ... Your other config here
}

Setting editor.fontLigatures to true enables font ligatures in VS Code.

Open a file, e.g. one called example.txt and paste the following text in it.

Copied!
=> -> --> >= <= ===

/= ~> >-> <-< <> |>

If ligatures are enabled, you should be able to see the following output.

If you still don't see font ligatures:

1. Make sure the font you set the editor.fontFamily property to is installed on your machine.
2. Try to restart Visual Studio Code.

# Enabling font ligatures in a local .vscode/settings.json file

An alternative approach to enable font ligatures is to use a local .vscode/settings.json file.

The local file applies the specified configuration only to the current project and overrides any global settings.

1. In the root directory of your project, create a .vscode folder.

2. Create a settings.json file in the .vscode folder.

3. Add the following code to your settings.json file.

Copied!
{
  // Font Family
  "editor.fontFamily": "'Fira Code', 'Cascadia Code', 'Consolas'",

  // Enable Font Ligatures
  "editor.fontLigatures": true
}

The configuration in your .vscode/settings.json file overrides any global configuration and is project-specific.

Open a file, e.g. one called example.txt and paste the following text in it.

Copied!
=> -> --> >= <= ===

/= ~> >-> <-< <> |>

If ligatures are enabled, you should be able to see the following output.

If you still don't see font ligatures:

1. Make sure the font you set the editor.fontFamily property to is installed on your machine.
2. Try to restart Visual Studio Code.

# Additional Resources

You can learn more about the related topics by checking out the following tutorials:

• How to add a Run Button in Visual Studio Code
• How to Change the default Terminal in Visual Studio Code
• How to Duplicate a Line or a Selection in VS Code