How to Change the Font and Enable Font Ligatures in VS Code

To change the VS Code font, set Editor: Font Family to a font installed on your computer. If that font contains programming ligatures, turn on Editor: Font Ligatures to render sequences such as =>, !=, and >= as joined glyphs without changing the underlying characters.

Change the editor font

Open your settings and search for Editor: Font Family. In the text field, type the name of the font you want to use.

Or add it directly to your user settings JSON:

json

{
  "editor.fontFamily": "Fira Code, monospace"
}

VS Code uses the first font in the list that is installed on your system. The fallback monospace ensures a readable default if the primary font is missing.

You can specify multiple fallback fonts separated by commas:

json

{
  "editor.fontFamily": "Cascadia Code, Fira Code, JetBrains Mono, monospace"
}

The change takes effect as soon as you save the file. Open any code file to see the new font.

Enable font ligatures

Search for Editor: Font Ligatures in the Settings editor and select the checkbox.

Or add this to your settings.json:

json

{
  "editor.fontLigatures": true
}

Save the file and open a file with operators like =>, !=, or >=. If your font supports ligatures, these characters render as combined symbols.

Popular programming fonts with ligatures

These font projects document programming ligature support:

Install a font on your system

Download the font only from its official project page, then follow that project's installation instructions. Font packages commonly contain .ttf or .otf files.

• Windows: Right-click each font file and select Install. Or drag them into the Fonts folder in Control Panel.
• macOS: Double-click each font file and select Install Font in Font Book.
• Linux: Use your distribution's font manager or the font project's Linux instructions. If you install files manually, follow the project instructions for the correct directory and font-cache step.

After installing, restart VS Code for the font list to refresh.

Change font size

Adjust the editor font size separately from the font family. This setting controls only the text size inside the editor, not the terminal or UI:

json

{
  "editor.fontSize": 14
}

The terminal has its own font size setting. Make sure to adjust it separately so the terminal text feels balanced with your editor:

json

{
  "terminal.integrated.fontSize": 13
}

Use different fonts per language

If you want a proportional font for Markdown but a monospace font for code, use language-specific settings:

json

{
  "[markdown]": {
    "editor.fontFamily": "Georgia, serif"
  }
}

Only Markdown files will use Georgia. All other file types use your global font setting.

What to try if ligatures do not appear

First confirm your font supports ligatures. Open the font project's documentation and look for a programming-ligatures section or examples.

Next check that Editor: Font Ligatures is set to true and not overridden by workspace settings. Open the Settings editor and look at both User and Workspace tabs.

If you installed a font and VS Code does not show it, restart the editor. VS Code reads the system font list at startup.

On Linux, make sure you refreshed the font cache after installing the font files.

Next steps

Now that your editor looks the way you want, you can change your color theme to match the new font. For more productivity settings, see 25 best VS Code settings.