My Favorite FREE VS Code Font in 2022 - Install and Setup with FONT LIGATURES!

#vscode #tools

VS Code is amazing, but it's pretty boring looking by default. The good news is that it only takes a few minutes to start to customize it and make it look much more fun! In this article, I'm going to show you how to install and setup my favorite FREE VS Code font, Cascadia Code.

Install

To install the font, download the latest ZIP file from the releases pages(2111.01 as of this article). After you've installed the ZIP, extract the files.

Then look for the different font files inside of the ttf folder.

On a Mac, you can double click each one of these files, and choose install.

On Windows, I believe you can right-click on the font files and choose "Install". Here's a link for more details, How to Download and Install Cascadia Code Font for Windows.

Setup in VS Code

Now that you have the font installed, you need to configure VS Code to use it. This will only take a second. Open your VS Code settings by clicking the gear icon in the lower left corner. Then, search for "Font Family" and type in "Cascadia Code".

Now, if you look at your code, it should look much better! Note that you may see a bit of a delay here. You may have to close a code file and open it back up.

Font Ligatures

One of my favorite features of this font is the ability to use Font Ligatures which create custom characters for things like triple equals, arrows, etc. In your settings, search for "Font Ligatures", and click "Edit in settings.json". Then, assign that property in JSON to true.



{
  //...other settings
  "editor.fontLigatures":true
}

Here's a final screenshot of my code!

Note that I think these a really neat, but keep in mind that you'll be sacrificing a bit of readability by using them since many people aren't used to seeing them.