Adding cursive font and ligatures to VSCode
March 12th, 2023

There are three setting changes to make in order to enable cursive font and font ligatures in VSCode

  1. Telling VSCode which parts of your code you want cursive
  2. Changing editor.fontLigatures to true
  3. Using a font which has cursive italics

All of these changes can be done in the settings panel, which can be accessed by CMD + , (macOS) or CTRL + , (Windows).

For the first part, we'll be editing editor.tokenColorCustomizations. This is a config where we can specify how to apply certain styles to specific bits of code. This is how it looks in settings.json with no styles applied:

"editor.tokenColorCustomizations": { "textMateRules": [ { "scope": [], "settings": { "fontStyle": "italic" } } ] }

The scope field is what we'll be editing to specify what pieces of code should have the italic fontStyle applied. If you want to know what scope a piece of code falls under you can pull up the command pallete (cmd + shift + p or ctrl + shift + p) and look for Developer: Inspect Editor Tokens and Scopes.

This is what my current configuration looks like:

"editor.tokenColorCustomizations": { "textMateRules": [ { "scope": [ "comment", "entity.name.type.class", // class names "keyword", // import, export, return… "constant", // String, Number, Boolean…, this, super "storage.modifier", // static keyword "storage.type.class.js" // class keyword ], "settings": { "fontStyle": "italic" } } ] }

The second part is a bit simpler, lets look for editor.fontLigatures in settings and set it to true. This enables ligatures, which can combine two or more characters into one.

As for the final part, we need to install a font which has cursive italics and ligatures. My personal choice is Fira Code iScript. This font can be downloaded and installed on your system from here.

After installing the font on your system, change the editor.fontFamily setting to 'Fira Code iScript', Consolas, 'Courier New', monospace.

You should now have cursive and ligatures enabled! Finished product:

Finished result